Как выполнить итерацию по столбцу таблицы HTML и ввести значения в массив Javascript с помощью jQuery

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

Допустим, у меня есть столбец таблицы с 10 строками, каждая с <td id="num"> и текстовым значением.

Как я могу использовать jQuery для перебора каждой строки в столбце и ввода вращений в массив Javascript?

Я думал, что следующий код сделает это, но он получает только первый элемент:

 var numArray = [];
$("#num").each(function(n){
   numArray[n] = $(this).text();
});
  

Есть идеи?

Спасибо!

Ответ №1:

У вас не может быть нескольких элементов с одинаковым идентификатором. Это недопустимо, поскольку идентификатор используется для идентификации отдельных элементов в DOM. Я бы предложил присвоить им всем один и тот же класс, который разрешен.

 <td class="num">
  

Тогда это должно сработать:

 var numArray = [];
$(".num").each(function(n){
   numArray[n] = $(this).text();
});
  

Комментарии:

1. Спасибо mcos, это сработало. Я пометил это как решение. Знаете ли вы, как я могу передать numArray через POST в PHP-скрипт, чтобы ВСЕ содержимое массива было доступно через $_POST в PHP?

2. Используйте JSON ( читайте об этом здесь ), это форма объектной нотации Javascript. Поскольку массивы являются объектами в javascript, лучше всего использовать JSON. Вы просто преобразуете свой объект в строку, закодированную в формате json, и передаете его вашему php-скрипту. Затем в скрипте вы можете использовать функцию json_decode ( читайте об этом здесь ) для преобразования вашего массива строк в массив php.

Ответ №2:

Как сказал mcos, выбор по идентификатору для всех таблиц не работает. На странице может быть только один элемент с заданным идентификатором.

Вы можете либо присвоить своей таблице идентификатор, либо выполнить следующее:

 var numArray = [];
// Assuming #my-table-id is your table and you want all the tds
$("#my-table-id td").each(function(n){
   numArray[n] = $(this).text();
});
  

Или, если вам не нужны все tds, используйте класс для определения тех, которые вы хотите

 var numArray = [];
// Assuming #my-table-id is your table and you added class="collect" 
// to the tds you want to collect
$("#my-table-id td.collect").each(function(n){
   numArray[n] = $(this).text();
});
  

Кроме того, функция map, крадущая ответы у других пользователей, также может помочь вам сделать ваш код еще меньше

 var numArray = $.map( $("#my-table-id td.collect"), function (td){
   return $(td).text();
})
  

Ответ №3:

Вы можете достичь этого с помощью .text(function(i, text){})

 var allText = [];
$("table td").text(function(i, t){
    allText.push(t);
});
  

Пример кода на jsfiddle

Если вам нужно настроить таргетинг на определенную ячейку (ы), вы можете просто изменить селектор.

 $("table td#num").text(function(i, text){
    allText.push(text);
});
  

С учетом сказанного, идентификатор должен быть уникальным для каждого dom, и если вы можете настроить html с помощью класса, это будет правильным способом.

  <td class="num">
   some text 1
 </td>

$("table td.num").text(function(i, text){
    allText.push(text);
});
  

Пример

Комментарии:

1. Проблема с этим решением заключается в том, что оно будет перебирать ВСЕ таблицы td. Я просто хочу, чтобы он выполнял цикл и получал значения td с id =»num». Как бы я это сделал с вашим решением? Спасибо.

2. @NeedExpertHelp, см. Обновление, скорректировал селектор и предоставил пример.

Ответ №4:

рекомендуется использовать не повторно идентификатор, но поскольку он будет html.. это все равно будет работать..

селектор jQuery ID (#) выберет только первое совпадение…

вместо этого вы можете использовать td[id^='num'] или td[id*='num'] или td[id$='num']

используйте map ..

 var numArray = $("td[id^='num']").map(function(){
return $(this).text();
}).get();
  

При этом будут выбраны все td с идентификаторами, начинающимися как num

Смотрите это здесь

Комментарии:

1. Это по-прежнему возвращает только первое значение. Посмотрите: jsfiddle.net/vG5Dk