如何用js在指定tr后添加tr

要在JavaScript中在指定的<tr>后添加一个新的<tr>元素，可以按照以下步骤进行操作：

1. 获取指定的<tr>元素： 首先，你需要获取到要在其后添加新<tr>的目标<tr>元素。可以通过ID、类名、属性等方式获取。

   javascript
   复制代码
   var targetTr = document.getElementById('target-tr-id');  // 使用ID获取目标<tr>元素
   // 或者
   var targetTr = document.querySelector('.target-tr-class');  // 使用类名获取目标<tr>元素
   

2. 创建新的<tr>元素： 使用document.createElement()方法创建一个新的<tr>元素。

   javascript
   复制代码
   var newTr = document.createElement('tr');
   

3. 构建<tr>的内容（可选）： 如果需要在新的<tr>中添加具体的内容或者单元格（<td>），可以使用innerHTML或者appendChild()等方法。

   javascript
   复制代码
   // 添加单元格内容
   newTr.innerHTML = '<td>Cell 1</td><td>Cell 2</td>';
   // 或者动态创建单元格并添加到新的<tr>中
   var td1 = document.createElement('td');
   td1.textContent = 'Cell 1';
   var td2 = document.createElement('td');
   td2.textContent = 'Cell 2';
   newTr.appendChild(td1);
   newTr.appendChild(td2);
   

4. 将新的<tr>插入到指定<tr>的后面： 使用insertAdjacentElement()或者parentNode.insertBefore()方法将新创建的<tr>插入到指定<tr>的后面。

   javascript
   复制代码
   // 使用insertAdjacentElement方法
   targetTr.insertAdjacentElement('afterend', newTr);
   // 或者使用parentNode.insertBefore方法
   targetTr.parentNode.insertBefore(newTr, targetTr.nextSibling);
   

示例代码：

假设HTML中有一个表格，要在ID为target-tr-id的<tr>后面添加新的<tr>。

html
复制代码
<table id="my-table">
    <tbody>
        <tr id="target-tr-id">
            <td>Existing Row</td>
        </tr>
    </tbody>
</table>

JavaScript代码：

javascript
复制代码
// 获取目标<tr>元素
var targetTr = document.getElementById('target-tr-id');

// 创建新的<tr>元素
var newTr = document.createElement('tr');
newTr.innerHTML = '<td>New Row</td>';

// 插入新的<tr>到指定<tr>后面
targetTr.insertAdjacentElement('afterend', newTr);

以上代码将在ID为target-tr-id的<tr>后面添加一个包含一个单元格的新<tr>元素。

这些步骤能够帮助你在JavaScript中实现在指定<tr>后添加新<tr>的操作。