使用JQuery

Question

我使用forEach循环创建了一个HTML表。

我需要在唯一的标题部分添加一列。

我有两个标题同时显示在两个表中，分别是“打开项目”和“关闭项目”，我需要在两个标题下都添加列。

<table align="center" cellpadding="0" cellspacing="0" width="100%;" border="1">
  <tr>
    <td>
      <table style="width:100%;">
        @foreach ($boardgroups as $boardgroupsitem)
        <tr>
          <td>
            <h2>{{$boardgroupsitem["grouptitle"]}}</h2>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <table cellpadding="0" cellspacing="0" id="tbl_table">
              <tbody>
                <tr id="tr_Col">
                  <td style="width:220px;font-weight:bold;"></td>
                  @php $i=0; foreach($group as $subgroup) { @endphp

                  <td style="width:180px;text-align:center;">
                    {{$subgroup[$i]->title}}
                  </td>
                  @php $i++; } @endphp
                </tr>
              </tbody>
              <tr id="tr_row">
                <td></td>
                @php $i=0; $mainid=$boardgroupsitem["id"]; $i=0; foreach($grouprows[$mainid] as $grouprw) { $i++; @endphp
                <td id="div_row" style="text-align:center;">{{$grouprw["title"]}}</td>
                @php if($i%2==0) { @endphp

              </tr>
              <td></td>
              @php } } @endphp
            </table>
          </td>
        </tr>
        @endforeach
      </table>
    </td>
  </tr>
</table>

Answer 1

我相信您想将ID为tbl_table的新列添加到表中。如果是这样，也许这将在jQuery中起作用：

$(function(){
    $("#btnAddColumn").on('click', function(){
        $("#tbl_table tr").append("<td></td>");
    });  
});

我们正在做的是，当单击ID为<td>的按钮时，我们正在向ID为tbl_table的表的每一行添加空btnAddColumn元素。

此外，我想指出一些事情。

• 您可以将所有<tr>元素括在<tbody>内。一个表可以有一个<thead>和一个<tbody>。

• 其次，当对任何元素使用id=属性时，请确保您没有重复相同的ID。我的意思是，id属性在HTML dom中应该是唯一的。也就是说，没有两个元素可以具有相同的id名称！在您的代码中，我相信您在重复ID tr_row，div_row，tr_Col，tbl_table等，因为它们在循环中！在这种情况下，class属性是最好的。因为class的名称不应唯一，而id的名称却是唯一的！

希望有帮助。如果没有，请编辑您的问题并提供更多详细信息，以便我们可能提出更多想法。

---

编辑

根据您的评论，提供解决方案。

尝试更改此行：

<tr id="tr_Col">

到

<tr class="tr_Col">

然后，尝试以下代码：

$(function(){
    $("#btnAddColumn").on('click', function(){
        $(".tr_Col").append("<td></td>");
    });  
});