How to append row to table id="address" on click of button?_问答_开发者

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

开发者 https://www.devze.com 2023-03-08 07:34 出处：网络

How to append row to table id=\"address\" on click of button <tr> <td>address:</td>

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

 <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');
});

Hope you just want to add a new row to the table with id "address". Following example should help you to accomplish this

<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>");
});

Make sure you refer your button and table with proper id

you can also try with :

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

DEMO

Simply giving the ID also work.

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

You can also make the table with that row and use display: none in the CSS, then make it show with a function.

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

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

Using a class for the colapsable rows also allows to hide many rows at the same time.