Question

刚刚学习html + Jquery

意思是每当我按下按钮时，它会在第一列中添加<td>标签。我想要做的是，如果我到达表的末尾或<th>，我只想放下一列。

$(".chkbox").click(function(){
  var value = $(this).val(),
      $list = $("#tablebody")

  if (this.click) {
    $list.append("<td data-value='"+ value + "'>"+ value + "</td>")
    $(this).remove()
  }
})

<table class="classytable" style="margin: 0px auto;">         
<caption>Сонгосон сонголт</caption>                                     
    <thead>   
        <tr id="colorfultr">
            <th scope="col">1</th> 
            <th scope="col">2</th> 
            <th scope="col">3</th>
            <th scope="col">4</th> 
       </tr>
    </thead>   
    <tbody id='tablebody'> 
     Inserted <td> goes in here
    </tbody> </table>

Answer 1

我对您的问题的解释是，在单击时，您要在表的正文中添加一个新的<td>元素，如果该行的单元格数少于该行，则应将其添加到表的当前最后一行。标题行，否则应添加到新的空行。因此，当您添加越来越多的单元格时，它们应该“换行”到新行。

要实现这一点，你可以这样做：

$(".chkbox").click(function() {
  var value = $(this).val(),
    $list = $("#tablebody"),
    $lastRow = $list.find("tr").last(),         // get reference to last row
    columnCount = $("#colorfultr th").length    // get number of columns
    
  if ($lastRow.length === 0 ||                       // if there are no rows
      $lastRow.find("td").length >= columnCount) {   // or last row is already full
      $lastRow = $("<tr></tr>").appendTo($list)      // add a new row
  }
  $lastRow.append("<td data-value='" + value + "'>" + value + "</td>")
  //$(this).remove()
})

th, td { width: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Clicking a button will add its text to the table:</p>
<button class="chkbox" value="A">A</button>
<button class="chkbox" value="B">B</button>
<button class="chkbox" value="C">C</button>

<table class="classytable" style="margin: 0px auto;">
  <caption>Сонгосон сонголт</caption>
  <thead>
    <tr id="colorfultr">
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
      <th scope="col">4</th>
    </tr>
  </thead>
  <tbody id='tablebody'>
  </tbody>
</table>

请注意，为了演示目的，在我的代码段中，我添加了按钮并从代码中注释掉了$(this).remove()，因为如果在点击时删除了按钮，则很难继续添加单元格...

如何把＆lt; tr>标签如果到达表的末尾

1 个答案: