Блог

Если у меня есть таблица

 <table id="myTable"><tr><td>First Thing</td><td>First Value</td></tr>
<tr><td>Second Thing</td><td>Second Value</td></tr>
<tr><td>Third Thing</td><td>Third Value</td></tr>
</table>
  

Как я могу использовать jQuery или javascript для поиска, чтобы получить индекс строки с текстом «Второе значение» и удалить его? Также возможно ли создать новую строку

 <tr><td>Fourth Thing</td><td>Fourth Value</td></tr>
  

одним нажатием кнопки? Придется ли мне перебирать существующие строки, чтобы получить последний индекс строки, в которую ее нужно вставить?

Вы можете легко добиться этого с помощью :contains() селектора, remove() функции и append() function. Вам не нужно перебирать строки, чтобы найти то, что вы ищете.

Чтобы получить индекс:

 $("#myTable").find("td:contains('Second Value')").parent().index();
  

Чтобы удалить ее:

 $("#myTable").find("td:contains('Second Value')").parent().remove();
  

Чтобы добавить строку:

 $("#myTable").append("<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>");
  

рабочий пример:http://jsfiddle.net/hunter/PzJWC

В идеале вы должны генерировать идентификаторы для каждого tr / td — но это, я полагаю, если вы получаете данные динамически.

Если вы знаете порядок расположения ваших таблиц, вы можете использовать эти слайдеры из jQuery

 $('tr:last-child').html('<p>This is the absolouty last tr in the WHOLE page<p>')

$('tr:nth-child(even)').addClass('evenColors')

$('tr:nth-child(4n)').remove()  //Removes the 4th from the top TR DOM Element

var theValueOf = $('tr:first-child').html() //assigns the innerHtml to your var
  

Итак, если у вас есть 10 таблиц, у каждой таблицы должен быть идентификатор или класс

  <table id="table1"> ...bla... </table>

$('table1 tr:last-child').remove() //Remove last TR from Table1
  

Вам нужно будет больше структурировать свой html с помощью идентификаторов и классов

В вашем случае вам придется каким-то образом программно реструктурировать вашу таблицу, чтобы присваивать уникальные идентификаторы каждой строке, а затем использовать jquery для ее выбора. Это идеальный мир, но вы выполняете цикл и проверяете каждый внутренний html до тех пор, пока не получите то, что хотите, и выполняете .remove()

Но чтобы получить ИНДЕКС, используйте hunters reply! Но, по опыту, это головная боль при работе с большими и динамическими документами.

В jQuery есть .insertAfter и insertBefore. Для таргетинга вы также можете использовать n-й дочерний css-селектор или, если вы хотите, чтобы он был динамическим (например, вставить строку после строки, на которую они нажимают), вы можете использовать оператор ‘this’ и некоторую навигацию dom. Все это говорит о том, что будьте очень осторожны при редактировании таблиц «на лету», у них есть некоторые особенности в отношении того, куда что-то можно вставить, и они сильно влияют на производительность.

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

 $('#myTable tr:last').after('<tr id="forth_row"><td>forth thing</td><td>forth value</td></tr>');}
  

чтобы найти и удалить эту строку:

 $('#myTable').find("#forth_row").remove();