如何通过单击jQuery中的html表来添加任何行[重复]

Posted 2023-02-22

【中文标题】如何通过单击jQuery中的html表来添加任何行[重复]

【英文标题】：How to add any rows by clicking html table in jQuery [duplicate]

【发布时间】：2020-07-23 06:43:44

【问题描述】：

我想知道是否可以通过单击在 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>

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

谢谢

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>

【问题讨论】：

你的意思是像点击表格内的任何地方应该继续将第一行附加到表格中？

您要插入的行的值是多少？它是从单击的行中复制的吗？或任何值

这能回答你的问题吗？ Add table row in jQuery

我在下面回答了你的问题吗？

【参考方案1】：

这行得通：

$( 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>

【参考方案2】：

你可以这样做：

$(document).ready(function() 
   $("table").on( "click", "tr", function() 
       $("table").append($(this).clone());
   );
);

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

【参考方案3】：

如果您只是想创建新的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>