如何通过单击 jQuery 中的 html 表格来添加任何行

Question

我想知道是否可以通过单击在 html talbe 中插入行。

例如，当我准备如下表格并单击它们时

    <table>

      <tbody>

        <tr>

          <td>0</td>

          <td>1</td>

          <td>2</td>

        </tr>

      </tbody>

    </table>

我想要的结果是这样的。我想知道如何通过单击添加任何行

<table>

      <tbody>

        <tr>

          <td>0</td>

          <td>1</td>

          <td>2</td>

        </tr>

           <tr>

          <td></td>

          <td></td>

          <td></td>

        </tr>

        .

        .

        .

        .

   </tbody>

  </table>

如果有人有意见，请告诉我。

Answer 1

你可以这样做：$(document).ready(function() {&nbsp; &nbsp;$("table").on( "click", "tr", function() {&nbsp; &nbsp; &nbsp; &nbsp;$("table").append($(this).clone());&nbsp; &nbsp;});});请注意，有必要将事件从页面最初加载时已经存在的父元素传递table到使用 的所有tr元素on()。jQuery on()

Answer 2

如果您只想创建新tr元素并在单击时将它们添加到表中，则可以简单地创建一个click事件处理程序来执行此操作。例如：// Store DOM elements in some variablesconst [tbodyEl] = document.querySelector('table').children;const [trEl] = tbodyEl.children;// Create an event handler functionconst sppendAdditionalRowToTable = e => {&nbsp; const newTrEl = document.createElement('tr');&nbsp; for (let i = 0; i < 3; i += 1) {&nbsp; &nbsp; newTrEl.appendChild(document.createElement('td'));&nbsp; }&nbsp; tbodyEl.appendChild(newTrEl);};// Call handler function on click eventtbodyEl.addEventListener('click', sppendAdditionalRowToTable);table {&nbsp; border-collapse: collapse;}td {&nbsp; border: solid black 1px;&nbsp; transition-duration: 0.5s;&nbsp; padding: 5px}<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>0</td>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 3

这有效：$( document ).ready(function() {&nbsp; $('#tableID').on( "click", "tr", function() {&nbsp; &nbsp; $("tbody").append("<tr><td>0</td><td>1</td><td>2</td></tr>");&nbsp; })});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <table id="tableID">&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>