<html>
<head>
<title>code by meixx</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var curRow=null;
function selectRow(tr1){
if(curRow)
curRow.bgColor="#FFFFFF";
tr1.bgColor="e7e7e7";
curRow=tr1;
}
function addRow(src){
var newrow = src.insertRow(src.rows.length-1);
newrow.attachEvent("onclick",function(){selectRow(newrow);});
newrow.height=20;
var i=4;
while(i--){
var newcell = newrow.insertCell();
switch(i){
case 0: newcell.innerHTML= '<input type="button" onClick="javascript:delRow(this.parentElement.parentElement)" value="?&#143;&#156;&#141;&#159;&#141;s">';break;
default: newcell.innerHTML=div1.innerHTML;break;
}
}
}
function delRow(src){
src.parentElement.deleteRow(src.rowIndex);
}
</script>
</head><BODY>
<SCRIPT LANGUAGE="JavaScript">
function addRow(tbl)
{
var a = tbl.insertRow();
a.id = "a" + tbl.rows.length;
for(var i=0; i<tbl.rows[0].cells.length; i++)
{
var tc = a.insertCell();
tc.innerText = " ";
tc.onfocus = function()
{
this.parentElement.parentElement.parentElement.ct = this.parentElement;
this.innerHTML = "<input type=\"text\" value=\"" + (this.innerText==" "?"":this.innerText) + "\" style=\"width:100%;height:100%;border:0;\" onblur=\"this.parentElement.innerText=(this.value==''?' ':this.value);\" onkeydown=\"if(event.keyCode == 13){this.blur();alert(this.parentElement.parentElement.children(i+1).innerHTML);}\">";
this.children[0].focus();
};
}
}function delRow(tbl)
{
if(!tbl.ct) return;
tbl.deleteRow(tbl.ct.rowIndex);
tbl.ct = null;
}</SCRIPT>
<table border=1 id="tbl">
<tr id=a1>
<td>NO.</td>
<td>Name</td>
</tr>
</table>
<input type="button" value="add" onclick="addRow(document.all.tbl);">
<input type="button" value="del" onclick="delRow(document.all.tbl);">
</BODY>
</html>懂了原理什么结构都一样

解决方案 »

  1.   

    <table border="1" id="tb">
    <tr>
    <td rowspan="2" width="100"><input type="text" id="txtFirst" style="width:100%"></td>
    <td width="150"><input type="text" id="txtSecond" style="width:100%"></td>
    </tr>
    <tr>
    <td>
            <table border="1" style="width:100%;height:100%">
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            </table>
        </td>
    </tr>
    <tr>
    <td rowspan="2" width="100"><input type="text" id="txtFirst" style="width:100%"></td>
    <td width="150"><input type="text" id="txtSecond" style="width:100%"></td>
    </tr>
    <tr>
    <td>
            <table border="1" style="width:100%;height:100%">
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
            </tr>
            </table>
        </td>
    </tr>
    </table><script language="JavaScript">
    <!--
    function addRowForTb(){
        var table=document.getElementById("tb");
        var tmpTr = table.rows[0].cloneNode(true);
        table.childNodes[0].appendChild(tmpTr);
        tmpTr = table.rows[1].cloneNode(true);
        table.childNodes[0].appendChild(tmpTr);
    }
    //-->
    </script>
    <input type="button" onclick="addRowForTb()" value="添加行">
      

  2.   

    zhaoxiaoyang(梅雪香@深圳) 的方法 果然好用,但仍然有一个问题,这样添加的行,与第一行完全一样,能不能将添加行的内容去掉。
      

  3.   

    在FF下,代码将有一些不同,自己改
    如果你定义了对象的ID or name,那么clone出来的都将相同,用代码自己改