Question

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

$('#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>

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

Answer 1

问题在于，如果表从一开始就为空，则将为each()运行<tr>循环，因为没有一个<tr>。

因此，在这里我在第一行中应用了一个标题，在第二行中应用了空白的文本框，这意味着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>

Answer 2

function addColumn(){

if($(".td_class").length>0){
$("#tr1").append('<td class="td_class"><input type="text"></td>');
}else{
$("#tr1").append('<td class="td_class">Chemical</td>');
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr id="tr1"></tr>
</table>
<button type="button" onclick="addColumn()">Add Column</button>

这是您想要的答案吗？

如何使用JavaScript动态在表格中创建列

2 个答案: