Как найти ячейку в таблице и установить значение следующей ячейки найденной ячейки, используя jQuery? - PullRequest
Новая
       0

Как найти ячейку в таблице и установить значение следующей ячейки найденной ячейки, используя jQuery?

1 голос
/ 02 марта 2012

Я с трудом пытаюсь установить значение определенной ячейки в таблице.

Вот ссылка на jsfiddle with, содержащая образец этого: Sample

Iиметь таблицу, которая создается следующим образом: 

var r = [];
var j = -1; 
r[++j] =  '<table cellspacing="0" id="TableWeeklyFrame"><thead><tr><th><div>Day</div></th><th><div>Profile</div></th></tr></thead><tbody>'; 
for (var i=0; i<data.length; i++) {     
    r[++j] = '<tr class="WeeklyFrameTR">';
    r[++j] = '<td class="WeeklyFrameDay">';
    r[++j] = data[i];
    r[++j] = '</td><td><select class="SelectionWeeklyFrameProfile"></select>';
    r[++j] = '</td>';
    r[++j] = '</tr>';
}
r[++j] = '</tbody></table>';
$('#TableWeeklyFrame').html(r.join(''));

Таким образом, таблица имеет 7 строк и 2 столбца: 

|Day|Profile|
|Monday|Value|
|Tuesday|Value|
|Wednesday|Value|
|Thursday|Value|
|Friday|Value|
|Saturday|Value|
|Sunday|Value|

Значение - это выборка, содержащая несколько значений.

Теперь проблема ..

У меня есть набор значений, экв (день = понедельник, значение = выкл).Поскольку дни не всегда в этом порядке (ну, в большинстве случаев, но это не главное), мне нужно сначала найти строку, содержащую день, а затем установить значение выбора на то, что я хочу.

Iможно найти строку с определенным днем, выполнив 

$('#TableWeeklyFrame tr.WeeklyFrameTR').find('td.WeeklyFrameDay:contains("Monday")');

И, наконец, вопрос: как установить значение следующей / второй ячейки для этой строки?

Я пытаюсь неперебрать всю таблицу.До сих пор я пробовал несколько вещей, в том числе: 

$('#TableWeeklyFrame tr.WeeklyFrameTR').find('td.WeeklyFrameDay:contains("Monday")').find('td select.SelectionWeeklyFrameProfile').val()
$('#TableWeeklyFrame tr.WeeklyFrameTR').find('td.WeeklyFrameDay:contains("Monday")').next('td').val()
$('#TableWeeklyFrame tr.WeeklyFrameTR').find('td.WeeklyFrameDay:contains("Monday")').find('select.SelectionWeeklyFrameProfile').val() 
$('#TableWeeklyFrame tr.WeeklyFrameTR').find('td.WeeklyFrameDay:contains("Monday")').next('select.SelectionWeeklyFrameProfile').val()

Все они возвращают неопределенное.Мне здесь чего-то не хватает, и я чувствую, что это что-то глупое и маленькое ..

Кроме того, если есть более простой и быстрый способ достижения аналогичного результата, пожалуйста, дайте мне знать.

Ответы [ 3 ]

2 голосов
/ 02 марта 2012

Селектор, для которого необходимо получить значение select, неверен: попробуйте это: 

$('#TableWeeklyFrame tr.WeeklyFrameTR')
    .find('td.WeeklyFrameDay:contains("Monday")')
    .next('td').find('select.SelectionWeeklyFrameProfile').val()

Пример скрипта

Вы также можете захотеть изучить использование index () и eq () и узнать, как они могут помочь вам в этом, поскольку они будут намного быстрее, чем использование селектора :contains('text').

2 голосов
/ 02 марта 2012

Вам нужно понять, как работают функции обхода в jQuery.

  • children траверсы для детей
  • find рекурсивно пересекает детей
  • next и prev пересекают одну сестру

Нельзя проходить как детей, так и братьев и сестер одновременно.

В вашем случае вам нужно пройти через братьев и сестер: 

mondayTD.next('td')

теперь вы набрали правильный td, и вы можете пройти через детей: 

.find('select')

Или (потому что select - это ребенок td) 

.children('select')

И у вас есть выбор.

1 голос
/ 02 марта 2012

Вы можете решить эту проблему проще, пройдя по родительскому элементу: 

$('td.WeeklyFrameDay:contains("Monday")').parent().find('select')

В целом, я думаю, что это решение для перемещения по dom будет трудно поддерживать и приводит к уродливому коду (как мойили любое из предложенных здесь решений).

Почему бы просто не дать каждому избранному уникальный идентификатор?Это значительно упростит изменение значения. 

r[++j] = '</td><td><select id=profile-"'+data[i]+'"></select>';

Может быть изменено с помощью 

$("#profile-Monday")
...