Как добавить новые строки таблицы поверх выбранной строки в jquery - PullRequest
Новая
       1

Как добавить новые строки таблицы поверх выбранной строки в jquery

1 голос
/ 13 февраля 2020

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

function maintest() {

  let table;
  let row0;
  let row1;
  let cell0;
  let cell1;
  let input2;
  let button; 
  
  table = $('<table>');
  table.attr({
    "id": "testTable"
  });


  row0 = $('<tr>').attr({"id":"selectedRow"});
  table.append(row0);
  cell0 = $('<td>');
  row0.append(cell0);
  input2 = $("<input>").attr({"class":"input0"});
  cell0.append(input2);

  cell1 = $('<td>');
  row0.append(cell1);
  
  button = $("<button>").attr({"class":"btn"}).text("Button").click(function() {
      row1 = $('<tr>').insertBefore($("#selectedRow"));
      table.append(row1);
      let cell2 = $('<td>');
      row1.append(cell2);
      let input3 = $("<input>").attr({"class":"input1"});
      cell2.append(input3);
  });
  cell1.append(button);
  
  
  $("#mainDiv").append(table);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

Я хочу вставить строку перед selectedRow, но она добавляет новую после этой строки

Примечание: я использую метод insertBefore

1 Ответ

1 голос
/ 13 февраля 2020

Проблема в том, что вы вызываете insertBefore(), который работает именно так, как вам нужно, но затем вы немедленно вызываете append(), который перемещает строку в конец table. Чтобы решить вашу проблему, просто удалите вызов append().

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

function maintest() {
  let $table = $('<table>').prop("id", "testTable");
  let $row0 = $('<tr>').prop("id", "selectedRow").appendTo($table);  
  let $cell0 = $('<td>').appendTo($row0);  
  let $input2 = $("<input>").addClass("input0").appendTo($cell0);
  let $cell1 = $('<td>').appendTo($row0);

  let $button = $("<button>").addClass('btn').text("Button").click(function() {
    let $row1 = $('<tr>').insertBefore($("#selectedRow"));
    let $cell2 = $('<td>').appendTo($row1);
    let input3 = $("<input>").addClass("input1").appendTo($cell2);
  }).appendTo($cell1);

  $("#mainDiv").append($table);
}

maintest();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>

Обратите внимание, что это можно еще больше упростить, создав фиктивный контент в DOM и клонируя его при необходимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...