日期:2014-05-16  浏览次数:20347 次

动态添加 td tr 表格 javascript

<html xmlns="http://www.w3.org/1999/xhtml" >
<head></head>

<script language="javascript">
function add()
{
var myTable = document.getElementById("aa");
var newRow = aa.insertRow(aa.rows.length);
var newTd1 = newRow.insertCell(0);
newTd1.innerText="lala";
var newTd2 = newRow.insertCell(1);
newTd2.innerText="^_^";
}
</script>
<body>
<form>
<input type="button" onclick="addline()" value="增加一行">
<table border="1" id="test">
<tr>
<td colspan="2"><input type="text" name="tt[]"></td>
</tr>
</table>
<input type="submit">
</form>
<script>
function addline(content){
newline=document.all.test.insertRow();
newline.insertCell().innerHTML='<input type="text" name="tt[]"><input type="button" value="删除此行" onclick="del()">'

}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
<input type="button" value="点我啊" onclick="add();">
<table id="aa" border="1" bordercolor="black" style="border-collapse: collapse" width="80%">
<tr>
<td width="50%">xixi</td>
<td width="50%">haha</td>
</tr>
</table>

</body>
</html>