我使用jQuery向表中添加一行作为最后一行。

我是这样做的:

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?


当前回答

jQuery有一个内置的工具,可以随时操作DOM元素。

您可以像这样向表中添加任何内容:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery中的$(“<some tag>”)是一个标记对象,它可以有几个可以设置和获取的attr属性,以及文本,它表示标记之间的文本:<tag>text</tag>。

这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。

其他回答

在这里,您只需单击按钮,即可获得输出。单击“添加行”按钮,然后添加一行。

我希望这很有帮助。

<html> 

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

    <style> 
        table { 
            margin: 25px 0; 
            width: 200px; 
        } 

        table th, table td { 
            padding: 10px; 
            text-align: center; 
        } 

        table, th, td { 
            border: 1px solid; 
        } 
    </style> 
</head> 

<body> 

    <b>Add table row in jQuery</b> 

    <p> 
        Click on the button below to 
        add a row to the table 
    </p> 

    <button class="add-row"> 
        Add row 
    </button> 

    <table> 
        <thead> 
            <tr> 
                <th>Rows</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>This is row 0</td> 
            </tr> 
        </tbody> 
    </table> 

    <!-- Script to add table row -->
    <script> 
        let rowno = 1; 
        $(document).ready(function () { 
            $(".add-row").click(function () { 
                rows = "<tr><td>This is row " 
                    + rowno + "</td></tr>"; 
                tableBody = $("table tbody"); 
                tableBody.append(rows); 
                rowno++; 
            }); 
        }); 
    </script> 
</body> 
</html>                  

使用jQuery.append()使用jQuery.appendTo()使用jQuery.after()使用Javascript.insertRow()使用jQuery-添加html行

试试看:

//使用jQuery-append$('#myTable>tbody').append('<tr><td>3</td><td>Smith-Patel</td></tr>');//使用jQuery-appendTo$('<tr><td>4</td><td>J.Thomson</td></tr>').appendTo(“#myTable>tbody”);//使用jQuery-添加html行让tBodyHtml=$('#myTable>tbody').html();tBodyHtml+='<tr><td>5</td><td>Patel S.</td></tr>';$('#myTable>tbody').html(tBodyHtml);//使用jQuery-after$('#myTable>tbody-tr:last').之后('<tr><td>6</td><td>天使布鲁ice</td></tr>');//使用JavaScript-insertRowconst tableBody=document.getElementById('myTable').getElementsByTagName('tbody')[0];const newRow=tableBody.insertRow(tableBody.rows.length);newRow.innerHTML='<tr><td>7</td><td>K。Ashwin</td></tr>';<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“myTable”><thead><tr><th>Id</th><th>名称</th></tr></thead><tbody><tr><td>1个</td><td>约翰·史密斯</td></tr><tr><td>2个</td><td>汤姆·亚当</td></tr></tbody></table>

简单来说:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

我的解决方案:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

用法:

$('#Table').addNewRow(id1);

要在当前行的最后一行添加新行,可以使用如下方法

$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');

您可以如上所述追加多行。也可以像这样添加内部数据

$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');

用另一种方式你可以这样做

let table = document.getElementById("tableId");

let row = table.insertRow(1); // pass position where you want to add a new row


//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);


//add value to added td cell
 cell0.innerHTML = "your td content here";
 cell1.innerHTML = "your td content here";
 cell2.innerHTML = "your td content here";
 cell3.innerHTML = "your td content here";