javascript 自动追加和删除表格行

绝地灬酷狼 2022-08-23 14:45 205阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][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/" οnclick=/"clearv(this)/" title=/"请在此输入被邀请者电子邮件/">" + "&nbsp;<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)" οnclick="addField('tid');">Add new Row</a></div>

</body>  
</html>

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml