Question

我正在尝试在第n个位置动态添加新列。目前，请在下面找到我的代码。

var name = window.prompt("Please enter the Column Name you intend to Add", "");
var name2 = window.prompt("Please enter the Column Location you intend to Add", "");
if (name == null || name.trim() == "" || name == "0") {
    alert('Invalid Column Number');
}
else if (name2 == null || name2.trim() == "" || name2 == "0") {
    alert('Invalid Column Number');
}
else {
    var name1 = parseInt(name2);
    $('td:nth-child(' + name1 + ')').append($("<td>"));
    $('th:nth-child(' + name1 + ')').html(name).css("font-weight", "Bold");     
}

HTML Mark-Up

<div class="table-responsive" style="margin-top:10px;">
              <table class="table table-striped table-bordered table-hover" id="myTable">
                 <thead>
                    <tr>
                       <th>Sl No</th>
                       <th>Item Id</th>
                       <th>Item Description</th>
                       <th>Quantity</th>
                    </tr>
                 </thead>
                 <tbody>
                    <tr id="mainid">
                       <td><input type="text"/></td>
                       <td><input type="text"/></td>
                       <td><input type="text"/></td>
                       <td><input type="text"/></td>
                    </tr>
                 </tbody>
              </table>
           </div>

我能够成功添加新列，但这正在取代现有列。我需要的是附加索引编号列，但它取代它。任何人都可以指导解决这个问题。

Answer 1

将before插入您在索引上找到的td，而不是附加

 $('td:nth-child(' + name1 + ')').insertBefore($("<td>"));

您要附加td，它会将td实际添加为已发现的td的子项而不是兄弟

还有一个建议

我还认为您也应该运行此行以添加新列的标题

$('th:nth-child(' + name1 + ')').insertBefore($("<th>"));

在第n个位置添加新列Javascript

1 个答案: