如何在动态生成的 html 表中将数据从一个文本框获取到另一个文本框?

窗扇范围

下面是我的代码。在该代码中,当我在 txtbox 中输入 3 并单击复制时,将生成 3 次相同的表。如果我在 txtbox 1 和 2 中输入名称和 ID 并单击获取数据,那么它将被设置为 txtbox 3 和 4。它仅适用于第一个表。问题是它不适用于动态表。帮帮我!!代码如下,

function copytbl() {
  var i, j;
  j = document.getElementById("txtbox").value;
  for (i = 0; i < j - 1; i++) {
    var row = document.getElementById("tblbdy"); // find row to copy
    var table = document.getElementById("tbl"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newID"; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
  }
}

function getdata() {
  document.getElementById("txtbox3").value = document.getElementById("txtbox1").value;
  document.getElementById("txtbox4").value = document.getElementById("txtbox2").value;
}

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
  height: 90px;
  text-align: left;
}

tr.noBorder td {
  border-right-style: hidden;
  border-left-style: hidden;
}
<input type="text" id="txtbox" name="textbox" onkeypress="return isNumber(event)" />
<input type="reset" value="Reset">
<button type="button" onclick="copytbl()">COPY</button><br>
<br>
<table id="tbl" style="width:100%">
  <tbody id="tblbdy">
    <tr>
      <td colspan="5">Header</td>
    </tr>
    <tr>
      <td>Name</td>
      <td colspan="3">Age</td>
      <td>Sex</td>
    </tr>
    <tr>
      <td rowspan="3">
        Name:<br>
        <input type="text" id="txtbox1" name="textbox" /><br> Id:
        <br>
        <input type="text" id="txtbox2" name="textbox" onkeypress="return isNumber(event)" /><br>
        <input type="reset" value="Reset">
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td rowspan="3">
        <input type="radio" name="gender" value="male" checked> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <br>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="4"></td>
    </tr>
    <tr>
      <td colspan="5">Footer</td>
    </tr>
    <tr class="noBorder">
      <td>
        <br>
        <button type="button" onclick="getdata()">GET DATA</button><br><br> Name:
        <br>
        <input type="text" id="txtbox3" name="textbox" /><br> Id:
        <br>
        <input type="text" id="txtbox4" name="textbox" /><br>
      </td>
    </tr>
</table>

提前致谢

凯文林奇

您需要将id正在使用的更改classes然后将tbody你生成的新id解析getdataFunction中

演示https://jsfiddle.net/kplcode/bt5da5go/2/

function copytbl() {
  var i, j;
  j = document.getElementById("txtbox").value;
  for (i = 0; i < j - 1; i++) {
    var newId = "newID-"+(document.querySelectorAll('.tblbdy-ele').length+i);
    var row = document.getElementById("tblbdy"); // find row to copy
    var table = document.getElementById("tbl"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = newId; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
    var getDataBtn = document.getElementById(newId).getElementsByClassName("getDataBtn")[0]
    getDataBtn.onclick = function() {
        getdata(newId);
    };
  }
}

function getdata(id) {
    var table = document.getElementById(id);
  document.getElementById(id).getElementsByClassName("txtbox3")[0].value = document.getElementById(id).getElementsByClassName("txtbox1")[0].value;
  document.getElementById(id).getElementsByClassName("txtbox4")[0].value = document.getElementById(id).getElementsByClassName("txtbox2")[0].value;
}

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将HTML文本框值从一个域复制到另一域的文本框?

来自分类Dev

如何计算在文本框中输入的数字的 10% 并立即在 php 和 html 中的另一个文本框中显示结果

来自分类Dev

如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

来自分类Dev

如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

来自分类Dev

如何显示与HTML中的另一个表的外键有关系的html文本框中的表的最后插入的ID(主键)

来自分类Dev

如何从一个PHP到另一个PHP获取文本框值

来自分类Dev

如何将文本从一个Web窗体文本框中移动到另一个Web窗体文本框中

来自分类Dev

如何根据另一个文本框值在jdeveleper的表中设置文本框只读?

来自分类Dev

HTML如何验证文本框是否已填充并将用户发送到另一个页面

来自分类Dev

如何使用 jQuery 将焦点从一个文本框更改为另一个文本框?

来自分类Dev

如何从另一个页面获取文本框或下拉列表的值?

来自分类Dev

如何在另一个文本框中同时写入文本框值?

来自分类Dev

如何在另一个窗口中读取文本框的文本

来自分类Dev

javascript-添加另一个文本框时,动态创建的文本框的值消失

来自分类Dev

MVC5 根据另一个文本框值动态禁用文本框

来自分类Dev

MS Word 2013:如何更改哪个文本框位于另一个文本框的顶部?

来自分类Dev

如何对另一个文本框中的数组文本框的所有输出求和

来自分类Dev

如何根据另一个文本框的值自动设置文本框的值

来自分类Dev

如何从单击另一个文本框时验证失败的文本框释放焦点

来自分类Dev

用户在文本框中插入值后如何显示另一个文本框?

来自分类Dev

如何在Windows Phone 8.1-C#中将文本框传输到另一个页面

来自分类Dev

如何从另一个线程的静态方法更改文本框的文本?

来自分类Dev

如何从多个文本框中获取文本控制另一个程序。C#WM_GETTEXT

来自分类Dev

如何从一个文本框获取价值并分配给下一个文本框

来自分类Dev

如何使用Java脚本将数据从一个本地html文件发送/获取到另一个本地html文件

来自分类Dev

基于另一个下拉列表的动态文本框和下拉列表 -javascript

来自分类Dev

如何在HTML中将元素文本从一个位置复制到另一个位置?

来自分类Dev

如何基于值和另一个的textchanged计算文本框值

来自分类Dev

C#-如何将焦点从一个文本框转移到另一个?

Related 相关文章

  1. 1

    如何将HTML文本框值从一个域复制到另一域的文本框?

  2. 2

    如何计算在文本框中输入的数字的 10% 并立即在 php 和 html 中的另一个文本框中显示结果

  3. 3

    如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

  4. 4

    如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

  5. 5

    如何显示与HTML中的另一个表的外键有关系的html文本框中的表的最后插入的ID(主键)

  6. 6

    如何从一个PHP到另一个PHP获取文本框值

  7. 7

    如何将文本从一个Web窗体文本框中移动到另一个Web窗体文本框中

  8. 8

    如何根据另一个文本框值在jdeveleper的表中设置文本框只读?

  9. 9

    HTML如何验证文本框是否已填充并将用户发送到另一个页面

  10. 10

    如何使用 jQuery 将焦点从一个文本框更改为另一个文本框?

  11. 11

    如何从另一个页面获取文本框或下拉列表的值?

  12. 12

    如何在另一个文本框中同时写入文本框值?

  13. 13

    如何在另一个窗口中读取文本框的文本

  14. 14

    javascript-添加另一个文本框时,动态创建的文本框的值消失

  15. 15

    MVC5 根据另一个文本框值动态禁用文本框

  16. 16

    MS Word 2013:如何更改哪个文本框位于另一个文本框的顶部?

  17. 17

    如何对另一个文本框中的数组文本框的所有输出求和

  18. 18

    如何根据另一个文本框的值自动设置文本框的值

  19. 19

    如何从单击另一个文本框时验证失败的文本框释放焦点

  20. 20

    用户在文本框中插入值后如何显示另一个文本框?

  21. 21

    如何在Windows Phone 8.1-C#中将文本框传输到另一个页面

  22. 22

    如何从另一个线程的静态方法更改文本框的文本?

  23. 23

    如何从多个文本框中获取文本控制另一个程序。C#WM_GETTEXT

  24. 24

    如何从一个文本框获取价值并分配给下一个文本框

  25. 25

    如何使用Java脚本将数据从一个本地html文件发送/获取到另一个本地html文件

  26. 26

    基于另一个下拉列表的动态文本框和下拉列表 -javascript

  27. 27

    如何在HTML中将元素文本从一个位置复制到另一个位置?

  28. 28

    如何基于值和另一个的textchanged计算文本框值

  29. 29

    C#-如何将焦点从一个文本框转移到另一个?

热门标签

归档