逐行插入Javascript

zd287kbt 于 2023-01-08 发布在 Java

关注(0)|答案(3)|浏览(120)

我不太擅长Javascript，有一样东西我做不好。我有一个表，大概是这样的：

<table>
    <tr><td>test #1</td><td><a href="#">Here we go1!</a></td></tr>
    <tr><td>test #2</td><td><a href="#">Here we go2!</a></td></tr>
    <tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>
</table>

我需要在按下链接的行后插入包含一些内容的新行（而不是克隆）。
换句话说，按下第一行中的<a>后，表格必须如下所示：

<table>
    <tr><td>test #1</td><td><a href="#">Here we go1!</a></td></tr>
    <tr><td>some content here</td><td><a href="#">some content here</a></td></tr>
    <tr><td>test #2</td><td><a href="#">Here we go2!</a></td></tr>
    <tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>
</table>

我真的尝试做一些事情，但它总是插入之前的表后。

- 更新日期：**

插入新行的JS代码如下所示：（我尝试使用一个解决方案张贴在这里，但它不工作）。

function RowAdd()
{
    var table=document.getElementById("test");
    var last=$(this).closest("tr").prevAll().length;
    var row=table.insertRow(last);
    row.insertCell(0);
    row.cells[0].innerHTML="test";
    row.insertCell(1);
    row.cells[1].innerHTML="test";
    row.insertCell(2);
    row.cells[2].innerHTML="test";
}

JavaScript

来源：https://stackoverflow.com/questions/26000626/insert-row-after-row-javascript

3条答案

按热度按时间

wgeznvg71#

如果我理解你需要这么做，对吗？
http://jsfiddle.net/OxyDesign/v7swo505/
JS（带有jQuery）

$(document).ready(function(){
    $('body').on('click','table a', function(e){
        $(this).closest('tr').after('<tr><td>New Content 1</td><td><a href="#">New Content 2</a></td></tr>');
    });
});

赞(0）回复(0）举报 2023-01-08

ckocjqey2#

假设您的表有一个id=myTable，您可以用途：

var table = document.getElementById("myTable");
var row = table.insertRow(1);    //inserts row at index 1, like in your example
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "data1";
cell2.innerHTML = "data2";

赞(0）回复(0）举报 2023-01-08

z18hc3ub3#

这将工作与其他例子或删除他们了。

<body>
    <table id="myTable">
        <tr><td>test #1</td><td><a href="#">Here we go1!</a></td></tr>
        <tr><td>test #2</td><td><a href="#">Here we go2!</a></td></tr>
        <tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>        
        <tr><td>test #4</td><td><a href="#">Here we go4!</a></td></tr>        
        <tr><td>test #5</td><td><a href="#">Here we go5!</a></td></tr>
    </table>
</body>

<script>
   var table = document.getElementById("myTable");
   var row = table.insertRow(1);    //inserts row at index 1, like in your example
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   cell1.innerHTML = "data1";
   cell2.innerHTML = "data2";

// This line becomes the 4th line after the insert.
// But it has the row value of 3, because row 1 is 0
// <tr><td>test #3</td><td><a href="#">Here we go3!</a></td></tr>   

   var row = table.deleteRow(3);    //inserts row at index 1, like in the example
</script>

https://jsfiddle.net/vr_driver/zjaoqbyh/7/

赞(0）回复(0）举报 2023-01-08

我来回答

逐行插入Javascript

3条答案

相关问题

热门标签

最新问答