如何通过单击 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() {

   $("table").on( "click", "tr", function() {

       $("table").append($(this).clone());

   });

});

请注意，有必要将事件从页面最初加载时已经存在的父元素传递table到使用 的所有tr元素on()。

jQuery on()

Answer 2

如果您只想创建新tr元素并在单击时将它们添加到表中，则可以简单地创建一个click事件处理程序来执行此操作。例如：

// Store DOM elements in some variables

const [tbodyEl] = document.querySelector('table').children;

const [trEl] = tbodyEl.children;

// Create an event handler function

const sppendAdditionalRowToTable = e => {

  const newTrEl = document.createElement('tr');

  for (let i = 0; i < 3; i += 1) {

    newTrEl.appendChild(document.createElement('td'));

  }

  tbodyEl.appendChild(newTrEl);

};

// Call handler function on click event

tbodyEl.addEventListener('click', sppendAdditionalRowToTable);

table {

  border-collapse: collapse;

}

td {

  border: solid black 1px;

  transition-duration: 0.5s;

  padding: 5px

}

<table>

  <tbody>

    <tr>

      <td>0</td>

      <td>1</td>

      <td>2</td>

    </tr>

  </tbody>

</table>

Answer 3

这有效：

$( document ).ready(function() {

  $('#tableID').on( "click", "tr", function() {

    $("tbody").append("<tr><td>0</td><td>1</td><td>2</td></tr>");

  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <table id="tableID">

      <tbody>

        <tr>

          <td>0</td>

          <td>1</td>

          <td>2</td>

        </tr>

      </tbody>

    </table>