Htmlテーブル行の作成または削除

Question

1つのことを行う必要があります。1）行の作成または削除。 エラーが見つかりました genereted行はボタンのアクションを追加または削除（コード化されていません）しません。元のボタンで使用されているのと同じ属性を使用しています。なぜこのようなことが起こっているのかわかりません。行の値？他の人は誰ですか？

<table class="tabla_uno table table-hover"> 
    <thead> 
     <tr> 
     <th >#</th> 
     <th >First Name</th> 
     <th >Last Name</th> 
     <th >Username</th> 
     <th ></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>a</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td class="controls"> 
      <button class='boton_mas btn btn-success btn-sm'>+</button> 
      <button class='boton_menos btn btn-danger btn-sm'>-</button> 
     </td> 
     </tr> 
     <tr> 
     <td>b</td> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
     <td class="controls"> 
      <button class='boton_mas btn btn-success btn-sm'>+</button> 
      <button class='boton_menos btn btn-danger btn-sm'>-</button> 
     </td> 
     </tr> 
    </tbody> 

    </table> 
    <hr> 

    <script> 
    $(document).ready(function() 
    { 
// ADD 
    $(document).on("click", ".boton_mas",function() 
    { 
    var datos = $(".tabla_uno tbody tr:first").clone(); 
    $("#product").append($(this).html()); 
    var insertHere = $(this).closest("tr"); 
    datos.insertAfter(insertHere); 
    }) 

    // REMOVE 
    $(document).on("click", '.boton_menos', function() 
    { 
    var rowCount = $('.tabla_uno tbody tr').length; 
    var MinRwows = 1;   
    if (rowCount === MinRwows) 
    { 
     alert("Minimo alcanzado, no puedes borrar mas filas");   
    } 
    else 
    { 
     $(this).closest("tr").remove(); 
    } 
    }) 
    }) 

Answer 1

これは、あなたが探しているように見えるものを行います。もちろん、新しい行を別々に作成したいと思うでしょうが、それはあなたをもっと近づけるでしょう。

セレクタを直接リスンするのではなく、ドキュメント自体にイベントリスナーを追加する必要があることに注意してください。これは、動的に作成された要素（作成される前に定義されたイベントリスナーは、それらを捕捉しないため）です。

だから、

$(document).ready(function() { 
 

 

 
    /***** 
 
    * This function will add a row to the given table directly 
 
    * after the row containing the clicked plus button. It will 
 
    * clone the first table row each time, then empty it of all 
 
    * data, then insert it into the given location. 
 
    *****/ 
 
    $(document).on("click", '.boton_mas', function() { 
 
    // Find the first table body row, and clone it. 
 
    var datos = $(".tabla_uno tbody tr:first").clone(); 
 

 
    // Replace the row number with the newly obtained number. 
 
    datos.find("th").empty(); 
 

 
    // Stick dummy content into the clone's td's. 
 
    datos.find("td").not(".controls").each(function() { 
 
     $(this).text($(this).index()); 
 
    }); 
 

 
    // Locate the row that was clicked. We'll add right after this. 
 
    var insertHere = $(this).closest("tr"); 
 

 
    // And stick the new row in. 
 
    datos.insertAfter(insertHere); 
 
    
 
    // Hide the control buttons... 
 
    datos.find(".boton_mas, .boton_menos").hide(); 
 
    
 
    // Now, we need to re-index all the rows headers: 
 
    $(".tabla_uno tbody th").each(function(){ 
 
     // get the index of the row itself, increment it by one 
 
     // as indices are zero-based, and change the th text. 
 
     $(this).text(parseInt($(this).closest("tr").index()) +1); 
 
    }) 
 
    }) // end .on("click", ".boton_mas") 
 

 
    /**** 
 
    * This function will remove rows when the minus button has 
 
    * been clicked. It will only run when there are more than 
 
    * one row, otherwise, it will do nothing. 
 
    ****/ 
 
    $(document).on("click", '.boton_menos', function() { 
 
    // This if statement will force a minimum of one row. 
 
    if($(".tabla_uno tbody tr").length > 1){ 
 
     // Simply remove the ancestor TR containing this 
 
     $(this).closest("tr").remove(); 
 
    
 
    } 
 
    }) // end .on("click", ".boton_menos") 
 
    
 
    // Utility functions to hide and show the add/remove buttons. 
 
    // Note that these expect that the css was used to hide them. 
 
    $(document).on("mouseenter",".tabla_uno tbody tr", function(){ 
 
    // Row is hovered, show the buttons. 
 
    $(this).find(".boton_mas, .boton_menos").show(); 
 
    }).on("mouseleave", ".tabla_uno tbody tr", function(){ 
 
    // Row is no longer hovered, hide them again! 
 
    $(this).find(".boton_mas, .boton_menos").hide(); 
 
    }); 
 
})

.boton_mas, .boton_menos { 
 
    display: none; 
 
} 
 

 
tr { 
 
    height: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tabla_uno table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
     <td class="controls"> 
 
     <button class='boton_mas btn btn-success btn-sm'>+</button> 
 
     <button class='boton_menos btn btn-danger btn-sm'>-</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th>2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
     <td class="controls"> 
 
     <button class='boton_mas btn btn-success btn-sm'>+</button> 
 
     <button class='boton_menos btn btn-danger btn-sm'>-</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th>3</th> 
 
     <td>Larry the Bird</td> 
 
     <td> Bird</td> 
 
     <td>@twitter</td> 
 
     <td class="controls"> 
 
     <button class='boton_mas btn btn-success btn-sm'>+</button> 
 
     <button class='boton_menos btn btn-danger btn-sm'>-</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

、あなたが好きな挿入作業をする（新しい行をクリックした行の直後に追加された場合）、単純にクリックした要素と使用が含まれているTRを見つけますdatos.insertAfter(insertHere);をご覧ください。

あなたのケースに合わせて、さらに2つの変更が必要でした。どちらもきわめて穏当で、どちらもかなり妥当です。 '.boton_mas'関数の最後を見ると、行が追加されたときにすべての行を再索引付けする.each（）ループが表示されます。あなたはあなたのコメントに絶対に正しいです、私たちは行を合計する必要はありません、単に全体を再インデックスする必要があります。簡単に、ループを確認します。

1つ以上の行を強制的に変更する（最後に残った行を削除しないようにする）変更は、「.boton-menos」関数で行ったように、if文を追加するだけです。まず、複数の行が残っているかどうかを確認し、存在する場合は、クリックされた行を削除する処理を行います。それ以外の場合、ifはバイパスされ、行は変更されません。

また、3つ目の機能を追加しました。追加/削除ボタンの表示/非表示に関するコメントは、行が表示されていない限り表示されませんでした。いつものようにコメントされたコードブロックの最後に表示されます。

希望すると便利です。

Answer 2

$(".tabla_uno").on('click','.boton_mas',function() 
 
\t { \t \t \t \t \t \t 
 
      let TR=$("<tr/>");   
 
      let TD1=$("<td/>",{text:'1'}); 
 
      let TD2=$("<td/>",{text:'2'}); 
 
      let TD3=$("<td/>",{text:'3'}); 
 
      let TD4=$("<td/>",{text:'4'}); 
 
      let TDBTN=$("<td/>"); 
 
      let BTN_mas=$("<button/>",{class:'boton_mas btn btn-success btn-sm',text:'+'}); 
 
      let BTN_menos=$("<button/>",{class:'boton_menos btn btn-danger btn-sm',text:'-'}); 
 
      TR.append(TD1); 
 
      TR.append(TD2); 
 
      TR.append(TD3); 
 
      TR.append(TD4); 
 
      TDBTN.append(BTN_mas); 
 
      TDBTN.append(BTN_menos); 
 
      TR.append(TDBTN); 
 
\t $(".tabla_uno tbody").append(TR); 
 
\t }); 
 
    $(".tabla_uno").on('click','.boton_menos',function() 
 
     { 
 
     $(this).parent().parent().remove(); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tabla_uno table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
     <td> 
 
<button class='boton_mas btn btn-success btn-sm'>+</button> 
 
<button class='boton_menos btn btn-danger btn-sm'>-</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th >2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
     <td> 
 
<button class='boton_mas btn btn-success btn-sm'>+</button> 
 
<button class='boton_menos btn btn-danger btn-sm'>-</button>  \t 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th >3</th> 
 
     <td>Larry the Bird</td> 
 
     <td> Bird</td> 
 
     <td>@twitter</td> 
 
     <td> 
 
<button class='boton_mas btn btn-success btn-sm'>+</button> 
 
<button class='boton_menos btn btn-danger btn-sm'>-</button>  \t 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>