创建或删除Html表行

Question

我需要做一件事1）创建或删除行。 发现错误生成的行不执行按钮操作添加或删除（未编码），我使用原始按钮中使用的相同属性。我不知道为什么会发生这种情况，附加方法不克隆行值？谁做其他人？

  <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

这可以满足您的需求。当然，您希望以不同方式填充新行，但它会让您更接近。

请注意，我必须将事件侦听器添加到文档本身，而不是直接侦听选择器。这是因为动态创建的元素 - 在创建之前定义的事件侦听器不会捕获它们。

＆＃13;

＆＃13;

$(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();
  });
})

＆＃13;

.boton_mas, .boton_menos {
  display: none;
}

tr {
  height: 25px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

因此，要使插入按照您的喜好（在单击的行之后立即添加新行），只需找到包含单击元素的TR并尽可能使用datos.insertAfter(insertHere);见上面的代码。

因此，您需要进行两项更改，以适应您的情况。两者都很琐碎，都非常合理。如果你看看＆＃39; .boton_mas＆＃39;的结尾。函数，你会看到一个.each（）循环，它在添加行时重新索引所有行。您在评论中完全正确，我们不需要对行进行求和，只需要重新索引整个行程。轻松完成，检查循环。

另一个更改，强制一行或多行（因此不允许删除最后剩下的行）只需通过添加if语句来完成，就像我在＆＃39; .boton-menos＆＃39;中所做的那样。功能。首先检查是否剩余多行，如果有，则执行删除单击行的处理。否则，绕过if并且行不受影响。

此外，添加了您正在寻找的第三个功能，错过了关于隐藏/显示添加/删除按钮的评论，除非该行被悬停。您将在代码块的末尾看到它们，像往常一样进行评论。

希望这有帮助！

Answer 2

＆＃13;

＆＃13;

$(".tabla_uno").on('click','.boton_mas',function()
	{						
          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);
	  $(".tabla_uno tbody").append(TR);
	});
     $(".tabla_uno").on('click','.boton_menos',function()
      {
        $(this).parent().parent().remove();   
      });

＆＃13;

<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>      	
      </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>      	
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;