javascript – 如何在当前列旁边添加表列

2023年10月30日 265次阅读

我想在当前专栏旁边添加TD和TH.这应该添加当我点击链接.

这是HTML：

<section class="yield-report-table">
  <table id="sorting">
    <tr class="headerrow ui-sortable">
      <th class="ui-resizable tac"><div class="ui-resizable">First Year Corn <br>Non Limited N, High Pop(1)</div></th>
      <th class="ui-resizable tac"><div class="ui-resizable">First Year Corn <br>Non Limited N, High Pop(2)</div></th>
    </tr>
    <tr>
      <td>
        <div class="report-icon-list bg-l-green">
          <a href="#" class="cht-add"><span><i class="cht-sprite">1</i></span></a>
        </div>
      </td>

      <td>
        <div class="report-icon-list bg-l-green">
          <a href="#" class="cht-add"><span><i class="cht-sprite">2</i></span></a>
        </div>
      </td> 
    </tr>
  </table> 
</section>

JS：

<script>
  $(function() {
    $('.report-icon-list .cht-add').on("click",function(){
      $i = $(".report-icon-list .cht-add").parents("td").index(this);
      $n = $(".report-icon-list .cht-add").parents("#sorting tr th").index(this);
      $(this).parents("td:eq("+$i+")").after("<td>discription</td>");
      $("#sorting tr th:eq("+$n+")").after("<th>heading</th>");
      alert($n)
  });
</script>

我能够将td附加到当前列旁边.但是它会在tr(行)的最后一列附加.

工作示例：http://codepen.io/anon/pen/BjoGZm

当前：
《javascript – 如何在当前列旁边添加表列》

预期：
《javascript – 如何在当前列旁边添加表列》

最佳答案

$(function() {
    $('.report-icon-list .cht-add').on("click",function(){
        var td = $(this).parent().parent();
        var $i = td.index();
        td.after("<td>discription</td>");
        $("#sorting tr.headerrow > th:eq(" + $i + ")").after("<th>heading</th>");
    });
})

请试试这个代码,这是您的需求吗？

点赞