如何在当前列旁边添加表格列

Question

我想在当前列旁边添加 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。但是 th 在 tr(row) 的最后一列被追加。

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

当前的：

预期的：

Answer 1

$(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>");
    });
})

请尝试此代码，这是您的需要吗？