如何在点击按钮时将行附加到表id =“address”?

时间:2011-05-26 10:14:19

标签: javascript jquery

如何在点击按钮

时将行附加到表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>

7 个答案:

答案 0 :(得分:8)

$('#new_row').click(function() {
    $('table#address').append('<tr><td>columns</td></tr');
});

答案 1 :(得分:2)

希望您只想在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>

答案 2 :(得分:1)

尝试:

$('table#address tr').append('<td>your new row</td>');

答案 3 :(得分:1)

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

确保您使用正确的ID

来引用您的按钮和表格

答案 4 :(得分:1)

您也可以尝试:

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

DEMO

答案 5 :(得分:1)

只需提供身份证即可。

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

答案 6 :(得分:1)

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

$(document).ready(function() {
    $('#yourbutton').click(function() {
        toggleRows();
    });
});

function toggleRows() {
    if ($('.colapsablerow').is(":visible")) {
        $('.colapsablerow').hide();
    } else {
        $('.colapsablerow').show();
    }
}

使用可缩放行的类也允许同时隐藏多行。