js操作表格的问题

<html>
<head>
<script language="javascript">
var htmlArray=new Array();
htmlArray[0]='<input type="radio" name="Number">';
htmlArray[1]='<select name="field" id="field"><option value="age" selected>年龄</option><option value="name">名称</option></select>';
htmlArray[2]='<select name="condition" id="condition "><option value="&gt;" selected>大于</option><option value="&lt;">小于</option><option value="=">等于</option><option value="&gt;=">大于等于</option><option value="&lt;=">小于等于</option></select>';
htmlArray[3]='<input name="v" type="text" id="v">';
htmlArray[4]='<select name="condition2" id="condition2"><option value="and">和</option><option value="or">与</option></select>';
function add_row()
{
var tb=document.all.sqd;
var newRow=tb.insertRow();
newRow.insertCell();
newRow.insertCell();
newRow.insertCell();
newRow.insertCell();
newRow.insertCell();
for(var i=0;i<newRow.cells.length;i++)
newRow.cells[i].innerHTML=htmlArray[i];
}
function del_row()
{
var chks=document.getElementsByName("Number");
if(chks.length==0){alert("没有可以删除的行!"); return;}
var rowindex=-1;
for(var i=0;i<chks.length;i++){
if(chks[i].checked){ rowindex=i;  }
}
if(rowindex<0){alert("没有选择要删除的行!"); return;}
if(confirm("真的要删除第"+eval(rowindex+1)+"行吗?"))
document.all.sqd.deleteRow(rowindex);
}
</script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="50"><input type="button" value="增加" onClick=add_row()></td>
    <td width="50"><input type="button" value="插入"></td>
    <td width="50"><input type="button" value="删除" onClick=del_row()></td>
    <td width="50"></td>
  </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0" id="sqd"></table>
</body>
</html>

解决方案 »

  1.   

    <table width="600" border="1" cellspacing="0" cellpadding="0" id="sqd">
      <tr id="row1" style=display:none> <!--这里改了-->
        <td><input type="radio" name=Number></td>
        <td><select name="field" id="field">
            <option value="age" selected>年龄</option>
            <option value="name">名称</option>
          </select></td>
        <td><select name="condition " id="condition ">
            <option value="&gt;" selected>大于</option>
            <option value="&lt;">小于</option>
            <option value="=">等于</option>
            <option value="&gt;=">大于等于</option>
            <option value="&lt;=">小于等于</option>
          </select></td>
        <td><input name="v" type="text" id="v"></td>
        <td><select name="condition2" id="condition2">
            <option value="and">和</option>
            <option value="or">与</option>
          </select></td>
      </tr>
    </table>
    <table width="600" border="1" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td>&nbsp;</td>
        <td><input type="submit" name="Submit" value="增加" onClick=add_row()></td>
        <td><input type="submit" name="Submit2" value="插入"></td>
        <td><input type="submit" name="Submit3" value="删除" onClick=del_row()></td>
        <td><input type="button" name="Submit3" value="test" onClick="alert(row1.innerHTML)"></td>
      </tr>
    </table>
    <script>
    i=1;
    function add_row()
    {
    //var newTR = row1.cloneNode(true);
    var con = row1.cloneNode(true);
    var newTR=con;
    newTR.style.display='';  //加的
    newTR.id="row"+(++i)
    row1.parentNode.insertAdjacentElement("beforeEnd",newTR);
    }
    function del_row()
    {
    //alert(sqd.rows.length);
    if(sqd.rows.length==1) 
    {
    alert("没有可以删除的对象了");
    return;
    }
    var checkit = false
    for (var i=0;i<document.all.Number.length;i++) {
    if (document.all.Number[i].checked) { checkit=true;
    sqd.deleteRow(i)
    break;
    }
    } if (!checkit) 
    {
    alert("请选择一个要删除的对象");
    return false
    }
    }
    </script>
      

  2.   

    <table width="100%" border="1" cellpadding="0" cellspacing="0" id="DataItem">
          <tr>
            <td width="8%" height="25"><div align="center">序号</div></td>
            <td width="30%" height="25"><div align="center">文件名</div></td>
            <td width="8%" height="25"><div align="center">页码</div></td>
            <td width="8%" height="25"><div align="center">份数</div></td>
            <td width="37%" height="25"><div align="center">作废理由</div></td>
            <td width="9%" height="25">&nbsp;</td>
          </tr>
        </table>
    <table width="100%" border="1" cellpadding="0" cellspacing="0">
      <tr>
            <td width="8%"><div align="center">增加行</div></td>
            <td width="30%"><div align="center">
              <input name="fileName" type="text" size="30">
            </div></td>
            <td width="8%"><div align="center">
              <input name="page" type="text" size="5">
            </div></td>
            <td width="8%"><div align="center">
              <input name="quantity" type="text" size="5">
            </div></td>
            <td width="37%"><div align="center">
              <textarea name="cause" cols="30" rows="2"></textarea>
            </div></td>
            <td width="9%"><div align="center">
              <input type="button" value="增加" onclick="javascript:addRow()">
            </div></td>
          </tr>
      </table>
    <script language="javascript">
    function addRow()
    {    
       var oRow1 = DataItem.insertRow(DataItem.rows.length);
       var aRows = DataItem.rows;
       var aCells= oRow1.cells;
       var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);
       var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);
       var oCell1_3=aRows(oRow1.rowIndex).insertCell(aCells.length);
       var oCell1_4=aRows(oRow1.rowIndex).insertCell(aCells.length);
       var oCell1_5=aRows(oRow1.rowIndex).insertCell(aCells.length);
       var oCell1_6=aRows(oRow1.rowIndex).insertCell(aCells.length);
       //序号
       oCell1_1.innerHTML = DataItem.rows.length-1;
       oCell1_1.align = "center";
       //文件名
       var strGroupOrder;
       strGroupOrder = document.theForm.fileName.value;
       strString = "<Input type='text' class='input' value='"+strGroupOrder+"' readonly size=30>";
       oCell1_2.innerHTML = strString;
       document.theForm.fileName.value="";
       oCell1_2.align = "center";
       //页码
       var strffh;
       strffh = document.theForm.page.value;
       strString = "<Input type='text' class='input' value='"+strffh+"' readonly size=5>";
       oCell1_3.innerHTML = strString;
       document.theForm.page.value="";
       oCell1_3.align = "center";
       //份数
       var strfs;
       strfs = document.theForm.quantity.value;
       strString = "<Input type='text' class='input' value='"+strfs+"' readonly size=5>";
       oCell1_4.innerHTML = strString;
       document.theForm.quantity.value="";
       oCell1_4.align = "center";
       //作废理由
       var strswr;
       strswr = document.theForm.cause.value;
       strString = "<Input type='text' class='input' value='"+strswr+"' readonly size=35>";
       document.theForm.cause.value="";
       oCell1_5.innerHTML = strString;
       oCell1_5.align = "center";
       //操作按钮
       oCell1_6.align = "center";
       FileName=null;
       oCell1_6.innerHTML = "<input type='button' value='删除' class='button' onclick='deleteRow()'>";
    }
    //删除行
    function deleteRow()
    {
       var tr;
       tr = event.srcElement.parentElement.parentElement;
       DataItem.deleteRow(tr.rowIndex);
    }
    </script>