编辑动态生成的表

editing dynamically generated table

本文关键字：动态 编辑      更新时间：2023-09-26

我有一个动态生成的表，表的底部包含一些文本字段，当点击保存时，我想将文本字段的值添加到该表的主体。这是表格

<table border="1" class="entity_table">
 <tfoot>
   <tr>
     <td>
       <div class="pane1"></div>
       <div class="pane2">
        <input type="text" id="name"><br>
        <select id="data">
         <option value="1">int</option>
         <option value="2">tinyint</option>
        </select>
        <br><span id="save">save</span>
       </div>
     </td>
  </tr>
</tfoot>
<tbody class="table-body" id='myid'></tbody>
</table>

我这样做了，但这是特定于id的。我想更新它被点击和编辑的那个特定的表。

var myName = document.getElementById("name");
    var data = document.getElementById("data");
    var Mtable = document.getElementById("myid");
    var rowCount = Mtable.rows.length;
    var mrow = Mtable.insertRow(rowCount);
    var mcell = mrow.insertCell(0);
    mcell.innerHTML = myName.value;
    var mcell1 = mrow.insertCell(1);
    mcell1.innerHTML = size.value;

我想更新每个动态生成的表的值是在其表的脚部分

你可以在下面使用jQuery:

 $(function(){
      $('#save').click(function(){
         $(this).closest('table').find('tbody').append('<tr><td>'+$('#name').val()+' and '+$('#data').val()+'</td></tr>');
      }); 
  });

编辑 -消除输入和选择框id依赖使用下面的代码:

$(function(){
    $('#save').click(function(){
     var name = $(this).closest('tr').find('input[type=text]').val();
     var data =  $(this).closest('tr').find('select').val();                 
     $(this).closest('table').find('tbody').append('<tr><td>'+name+' and '+data+'</td></tr>');
    }); 
});

如果我没理解错的话，你应该不想用元素的ID来选择它。

如果你不想处理元素id，你还有其他的选择:

1)您可以添加一些data-属性，例如:data-id。在此基础上，像这样选择元素:

myElement.querySelector("[data-id='X']")，其中myElement是您的表的父元素，X是您之前生成的它们的ID(让我们说它将从0开始，并将随着每个下一个表而增加)。

2)如果可能，与对象一起工作。当您创建表时，您可以使用定义html元素的原始文本创建它们，或者通过在document关键字上调用createElement("table")来创建新元素。如果第二个选项是您的选项，您可以将这些元素保存到某个数组中(在本例中为myTables)，然后以标准方式处理这些元素-例如: 
myTables[0].getElementsByTagName("input")

希望它能帮助你的问题。希望我理解了你的问题。

相关文章：