您的位置：首页 > Web前端 > JavaScript

javascript 自动追加和删除表格行

2008-10-14 18:15 169 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tid{
background-color:#0099FF;
border:1px #0099FF solid;
width:90%;
}
#tid td{
background-color:#FFFFFF;
}
</style>
<script language="javascript">
function addField(tableid) {
for (q = 0; q < 2; q++) {
var ls_t = document.getElementById(tableid)
var j = ls_t.rows.length;
maxcell = ls_t.rows[0].cells.length;
mynewrow = ls_t.insertRow(j);
mynewcell = mynewrow.insertCell(0);

mynewcell.innerHTML = q;
mynewcell = mynewrow.insertCell(1); mynewcell.align = "center";
mynewcell.innerHTML = "<div style=/"margin-left:2px;/"><input name=/"typeNote[]/" type=/"text/" size=/"15/"></div>";
mynewcell = mynewrow.insertCell(2); mynewcell.align = "center";
mynewcell.innerHTML = "hello"
mynewcell = mynewrow.insertCell(3); mynewcell.align = "center";
mynewcell.innerHTML = "<select name=/"typeBalcony[]/"><option value=/"0/" style=/"background-color:#D60309;color:#FFFFFF;font-weight:bold;/">NO</option><option value=/"1/" style=/"background-color:#009900;color:#FFFFFF;font-weight:bold;/">YES</option></select>";
mynewcell = mynewrow.insertCell(4);mynewcell.align = "center";
mynewcell.innerHTML = '<input name="typeLayout[]" type="text" id="typeLayout[]" size="20">';
mynewcell = mynewrow.insertCell(5);mynewcell.align = "center";
mynewcell.innerHTML = "<input style=/"width:200px;/" id=/"mail"+ q +"/" name=/"mail"+ q +"/" type=/"text/" value=/"请在此输入收件人Email/" onclick=/"clearv(this)/" title=/"请在此输入被邀请者电子邮件/">" + " <a href='javascript:' onClick='tb_delete(/""+ tableid +"/",this.parentNode.parentNode)'><img src='D://Apache2.2//htdocs//eCommerceSite//comm//img//button//btn_myword_add1.gif' border='0' alt='删除此行'></a>"
mynewcell.id="td*"+q;
}
}

function tb_delete(tableid,trNode)
{
var ls_t = document.getElementById(tableid);
//i = getNodeIndex(ls_t, trNode);
i = trNode.rowIndex ;
//alert(i);
ls_t.deleteRow(i);

}
</script>
</head>
<body>
<table cellspacing="1" id="tid">
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
</tr>

</table>
<div align="right"><a href="javascript:void(0)" onclick="addField('tid');">Add new Row</a></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航