創建或刪除Html錶行

Question

我需要做一件事1）創建或刪除行。 發現錯誤生成的行不執行按鈕操作添加或刪除（不編碼），我使用原來的按鈕中使用相同的屬性。我不知道爲什麼會發生這種情況，append方法不克隆行值？誰做的？

<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);。

所以你需要做兩個更改，以適應你的情況。兩個都很瑣碎，都很合理。如果您查看'.boton_mas'函數的結尾，您會看到一個.each（）循環，用於在添加行時重新索引所有行。你在評論中絕對正確，我們不需要總結行，只需要重新索引整個事情。輕鬆完成，檢查循環。

另一個改變，強制一行或多行（所以不允許刪除最後剩下的行）只需通過添加if語句來完成，就像我在'.boton-menos'函數中做的那樣。首先檢查是否還有多行，如果存在，則執行刪除點擊行的處理。否則，if被繞過並且該行未被觸摸。

此外，添加您正在尋找的第三個功能，錯過了有關隱藏/顯示添加/刪除按鈕的註釋，除非該行被徘徊。你會在代碼塊的末尾看到它們，像往常一樣評論。

希望這會有所幫助！

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>