时间戳

首页 > 解决方案 > 如何使用 javascript 在表中动态创建列

javascript - 如何使用 javascript 在表中动态创建列

问题描述

当我单击按钮时，我想创建一个与旧列相同的新列。[希望输出]

$('#btnAddCol').click(function() {
  myform.find('tr').each(function() {
    var trow = $(this);
    if (trow.index() === 0) {
      trow.append('<td class="calculated-value">Chemical</td>');
    } else {
      trow.append('<td><input type="text" name="cb' + iter + '"/></td>');
    }
  });
  iter += 1;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnAddCol" style="margin-left: 79%;">add column</button>

当我单击添加列按钮时，新列将创建并包含列标题和输入字段。

标签： javascriptjqueryhtml

解决方案

问题是，如果表格从一开始就是空白的，它将能够运行each()循环 for<tr>因为没有 one <tr>。

所以，在这里我在第一行应用了一个标题，在第二行应用了一个空白文本框，这意味着 each() 循环将为 each 播放两次<tr>。

检查以下代码：

var iter = 0;
$('#btnAddCol').click(function () {
    $('#myTable tr').each(function (e) {
        var trow = $(this);
        if (trow.index() === 0) {
            trow.append('<td class="calculated-value">Chemical</td>');
        } else {
            trow.append('<td><input type="text" name="cb' + iter + '" /></td>');
        }
    });
    iter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
    <tr><td>Heading</td></tr>
    <tr><td><input type="text" name="cb'+iter+'" /></td></tr>
</table>


<button type="button" id="btnAddCol" style="margin-left: 79%;">add column</button>

推荐阅读