테이블 행을 동적으로 삽입 / 제거 (추가 된 행에 ID를 부여하는 방법 포함)

스크린 샷처럼 각 라인 컨트롤에 대해 작동하는 whitout id의 예 (id는 다른 것들 중 하나 일뿐입니다 ...)

동일한 ID를 여러 개 가질 수 없습니다. 그러면 작업 버튼이 해당 클래스 이름 ".add"및 ".del"로 호출된다고 가정합니다.

제거 용

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
});

새로운 라인

$(".add").on("click", function()
{
    var line = $(this).parents("tr"); // get the line of element clicked
    var lineOffset = line.index(); // get the offset position of this line
    // and using css selector, you can simply add line after another
    $("table tr:eq("+lineOffset+")").after(line.clone(true));
    // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});

테이블 테스트

<table>
    <tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>

(function() {

  $(".del").on("click", function() {
    // removing the line of element clicked
    $(this).parents("tr").remove();
  });

  $(".add").on("click", function() {
    var line = $(this).parents("tr"); // get the line of element clicked
    var lineOffset = line.index(); // get the offset position of this line
    // and using css selector, you can simply add line after another
    $("table tr:eq(" + lineOffset + ")").after(line.clone(true));
    // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
  });

})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr id="a_0">
    <td>test0</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
  <tr id="a_1">
    <td>test1</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
  <tr id="a_2">
    <td>test2</td>
    <td><span class="del">[X]</span><span class="add">[o]</span>
    </td>
  </tr>
</table>

그러나 내 예에서 볼 수 있듯이 a_ *로 시작하는 ID는 사용되지 않습니다 (예, 필요하지 않으며 귀하의 경우에 상대적인 것은 아닙니다) 그리고 그것을 만드는 또 다른 방법은 jquery 메서드 .index ()를 사용하여 줄을 얻는 것입니다. 오프셋 클릭 및 .. 제거 또는 복사!

노트 :

라인 ID를 사용해야하는 경우 다음과 같은 CSS 선택기를 사용하여 계속 진행할 수 있습니다.

$("tr[id^='a_']")

표를 비운 경우

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
    if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
       $("#hidden_control").show(); // or .css("display", "block");
});

$("#hidden_control").on("click", function()
{
    $("table").append("<tr><td>...</tr>"); // add a new first line
    $(this).hide(); // and hide it directly until next reinit
});

// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">

// or, hidden row solution (where colspan=6 depend the number of cell you have: 
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>

   // CSS class for hidden_control
   #hidden_control
   { display: none; }

문서 :

https://api.jquery.com/으로 이동하여 "parents", "after", "remove", "append", "html", "index"를 검색합니다.