如何将行追加到表id=“”;地址“;点击按钮

How to append row to table id="address" on click of button?

本文关键字:地址 按钮 id 追加      更新时间:2023-09-26

如何点击按钮将行追加到表id="address"

 <tr>
     <td>address:</td>
     <td><input type="text"></input></td>
     <td><input type="text"></input></td>
     <td><input type="text"></input></td>
 </tr>
$('#new_row').click(function() {
    $('table#address').append('<tr><td>columns</td></tr');
});

希望您只想向id为"address"的表中添加一个新行。下面的例子应该可以帮助你完成这个

<html>
<head>
<script type="text/javascript">
function addRow(content,morecontent)
{
         if (!document.getElementsByTagName) return;
         tabBody=document.getElementsByTagName("TBODY").item(0);
         row=document.createElement("TR");
         cell1 = document.createElement("TD");
         cell2 = document.createElement("TD");
         textnode1=document.createTextNode(content);
         textnode2=document.createTextNode(morecontent);
         cell1.appendChild(textnode1);
         cell2.appendChild(textnode2);
         row.appendChild(cell1);
         row.appendChild(cell2);
         tabBody.appendChild(row);

}
</script>
</head>
<body>
<table border='1' id='mytable'>
<tbody>
<tr><td>22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
</tbody>
</table>
<button onClick='addRow("123","456");return false;'>
Add Row</button>
</body>
</html>

try:

$('table#address tr').append('<td>your new row</td>');
$(".ButtonId").click(function(){
$("table#address tr").append("<td>New Table Row</td>");
});

确保您用正确的id 引用按钮和表格

您也可以尝试使用:

$("#buttonID").live('click',function(){
$("<td>New Row</td>").appendTo("table#address tr")
});

演示

简单地给出ID也可以。

$('#address').append('<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td> </tr>')

您也可以用该行制作表,并在CSS中使用display: none,然后用函数显示。

$(document).ready(function() {
    $('#yourbutton').click(function() {
        toggleRows();
    });
});
function toggleRows() {
    if ($('.colapsablerow').is(":visible")) {
        $('.colapsablerow').hide();
    } else {
        $('.colapsablerow').show();
    }
}

为可协作的行使用类还允许同时隐藏许多行。