Question

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

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

我想用表格的脚部分

中输入的值更新每个动态生成的表格

Answer 1

你可以在jQuery下面使用：

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

<强> Demo

编辑 - 消除输入并选择框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>');
    }); 
});

<强> Demo

Answer 2

因此，如果我理解这一点，你不想使用元素的ID来选择它。

如果您不想使用元素ID，还有其他选项：

1）您可以添加一些data-属性，例如：data-id。在此基础上，您可以选择以下元素：

myElement.querySelector("[data-id='X']")其中myElement是表格的某个父元素，而X是您之前生成的ID（假设它将从0开始，并将随每个下一个表格递增）

2）如果可能，使用对象。在创建表格时，您可以使用带有定义html元素的原始文本创建表格，也可以在createElement("table")关键字上调用document创建新元素。如果您选择第二个选项，则可以将此元素保存到某个数组（本例中为myTables），然后以标准方式处理这些元素 - 让我们说：

myTables[0].getElementsByTagName("input")

希望它可以帮助您解决问题。希望我理解你所问的问题。

编辑动态生成的表

2 个答案: