Вставка новой строки по указанному индексу в html

Question

Я использую таблицу HTML.Я хочу вставить новую строку в эту таблицу динамически, как нажатие кнопки.Меня так судили,

var rows = $(this.element).find("tbody").find("tr");
prevElem = rows[index];
$("<tr><td>data</td><tr>").insertBefore(prevElem);

Но это не работает.Как вставить новую строку по указанному индексу?

Заранее спасибо,

-Raja.

Answer 1

Посмотрите здесь :

$('#txtIndex').val($('#tblAddMe tbody tr').length);
$('#btnAdd').click(function() {
  var indx = $('#txtIndex').val() - 1;
  var newRow = $('<tr><td>New Row Added' + $('#tblAddMe tbody tr').length + '</td></tr>');
  newRow.insertBefore($('#tblAddMe tbody tr:nth(' + indx + ')'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblAddMe">
  <tbody>
    <tr>
      <td>Row 1</td>

    </tr>
    <tr>
      <td>Row 2</td>

    </tr>
  </tbody>
</table>
<input id="txtIndex" />
<button type="button" id="btnAdd">Add</button>

Я сделал рабочий пример вставки строки перед элементом.

Answer 2

должно быть $('<tr><td>...<td></tr>').insertBefore(prevElem);

Answer 3

Индексы основаны на 0, поэтому для 4-й строки необходим i-1.

Это должно быть: prevElem = rows[index-1];