如何实现批量的数据输入，即用多行的表格（grid）来实现

<SCRIPT LANGUAGE="JavaScript">
<!--
function add(){
var nTR = document.createElement("TR");
var nTD0 = document.createElement("TD");
nTD0.innerHTML="<input type=text name=cat>";
var nTD1 = document.createElement("TD");
nTD1.innerHTML="<input type=text name=price>";
var nTD2 = document.createElement("TD");
nTD2.innerHTML="<input type=text name=volume>";
var nTD3 = document.createElement("TD");
nTD3.innerHTML="<input type=text name=memo>";
for (var i=0;i<4;i++){
eval("nTR.appendChild(nTD" + i + ");");
}
srctb.childNodes(0).appendChild(nTR);
}
//-->
</SCRIPT>
<TABLE id=srctb>
<TR>
<TD>科目</TD>
<TD>价格</TD>
<TD>数量</TD>
<TD>说明</TD>
<TD><A HREF="#" onclick="add();return false;">添加</A></TD>
</TR>
</TABLE>

解决方案 »

  1.   

    <html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    if (elm.tagName != "TD") return;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th>head</th>
    <th width=100>head1</th>
    <th width=100>head2</th>
    <th width=100>head3</th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onclick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onclick="deleteLine()">删除</button>
    <button onclick="addLine()">添加</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>
      

  2.   

    sorry，我仔细看了一下，都是设置的td中的innerHTML，的确不便于提交，修改起来较麻烦
    看下面这段代码，是以前收藏的，提交后可以作同名数组取值
    <script language="javascript">
    function alterRow(rowsCount,cellsCount,postRowsCount)//增加或删除行
    {//rowsCount:table行数，cellsCount:table列数，postRowsCount:要增加行的位置后面已有的行数
    with(window.event)
    {
    var e=srcElement //e=input
    var r=e.parentElement.parentElement //r=tr
    var t=r.parentElement.parentElement //t=table
    //alert(r.parentElement.tagName)
    if(keyCode==68 && ctrlKey && t.rows.length>rowsCount)
    {
    t.deleteRow(r.rowIndex);//删除行
    document.focus();
    return false;
    }
    if(keyCode!=13||e.parentElement.cellIndex!=cellsCount-1)
    return true;//e.parentElement=td
    //if(t.rows.length>r.rowIndex+1)return true;
    var n=t.insertRow(t.rows.length-postRowsCount);
    for(i=0;i<r.cells.length;i++)
    {
    var c=n.insertCell();
    c.innerHTML=r.cells(i).innerHTML;
    c.children[0].value="";
    }
    }
    }
    function mysubmit()
    {
    alert(document.all.mytable.innerHTML);
    }
    </script>
    <body bgcolor="#FFFFFF" text="#000000" onkeydown="if(event.keyCode==13 && event.srcElement.tagName!='TEXTAREA') {event.keyCode=9;}">
    <table width="100%" border="1" id=mytable>
      <tr> 
        <td><div align="center">科研工作项目</div></td>
        <td><div align="center">预期目标</div></td>
        <td><div align="center">进度</div></td>
        <td><div align="center">工作者</div></td>
      </tr>
      <tr> 
        <td><INPUT name=ItemSub size=10 onkeydown="alterRow(2,4,0)"></td>
        <td><INPUT name=ItemObject size=10 onkeydown="alterRow(2,4,0)"></td>
        <td><INPUT name=ItemSche size=10 onkeydown="alterRow(2,4,0)"></td>
        <td><INPUT name=Workman size=10 onkeydown="alterRow(2,4,0)"></td>
      </tr>
    </table>
    <button onclick="mysubmit()">submit</button>
    说明：如需增加一行，请在最后一项输入完毕后敲回车即可；如果要删除一行，请先将光标移至该行的某一输入框中，然后再按Crtl+D即可。
    </body>