...">
Geek asks and answers

How to add a row to the table id = "address" when a button is clicked?

How to add a row to a table id="address"when a button is clicked

 <tr>
     <td>address:</td>
     <td><input type="text"></input></td>
     <td><input type="text"></input></td>
     <td><input type="text"></input></td>
 </tr>
+3
source share
7 answers
$('#new_row').click(function() {
    $('table#address').append('<tr><td>columns</td></tr');
});
+8
source

Hope you just want to add a new row to the table with the identifier "address". The following example should help you complete 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>
+2
source

:

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

,

+1

:

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

DEMO

+1

.

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

display: none CSS, .

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

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

, , .

+1

More articles:


All Articles