How to append row to table id="address" on click of button?
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.
加载中,请稍侯......
精彩评论