怎么对JS生成表用鼠标事件赋植

在jsp页码里有2table 
一张为空表 
一张表是放查询数据库记录值 
怎么把放数据库记录值的表的一条记录(也就是一行！双击这一条记录到上面那张空table里面去就自己填上) <上面表是JS的回车事件写的>
table width="978"id="testTable" border="1">
    <tr>
        <td width="10%" height="17" valign="middle">补料单号</td>
        <td width="20%" valign="middle">规格</td>
        <td width="22%" valign="middle">原因判定</td>
        <td width="20%" valign="middle">材损</td>
        <td width="20%" valign="middle">品名</td>
        <td width="8%" valign="middle">数量</td>    
    </tr>
    <tr id="testTr0">
        <td width="10%" height="17" valign="middle"><input type="text" id="testInput0" value="" onkeydown="addRow('1')"/></td>
        <td width="20%" valign="middle"><input type="text" id="testInput1" value="" onkeydown="addRow('1')"/></td>
        <td width="22%" valign="middle"><input type="text" id="testInput2" value="" onkeydown="addRow('1')"/></td>
        <td width="20%" valign="middle"><input type="text" id="testInput3" value="" onkeydown="addRow('1')"/></td>
        <td width="20%" valign="middle"><input type="text" id="testInput4" value="" onkeydown="addRow('1')"/></td>
        <td width="8%" valign="middle"><input type="text" id="testInput5" value="" onkeydown="addRow('1')"/></td>
        
    </tr>
</table>
<script>
    var textIndex = 6;
    var rowIndex = 1;
    function addRow(newRowIndex) {
        if (event.keyCode == 13 && newRowIndex == rowIndex) {
            var table = document.getElementById("testTable");
            var tbody = table.tBodies[0];
            var tr = document.createElement("TR");
            tr.id="testTr" + rowIndex;
            rowIndex++;            var td;
            var input;
            for (var i = 0; i < 6; i++) {
                td = document.createElement("TD");
                input = document.createElement("INPUT");
                input.type="text";
                input.id="testInput" + textIndex;
                input.onkeydown = function () {addRow(rowIndex);};
                td.appendChild(input);
                tr.appendChild(td);
                textIndex++;
            }
            tbody.appendChild(tr);
            table.appendChild(tbody);
        }
    }
    
    function getValue() {
        var getRowValueIndex = document.getElementById("getRowValueIndex");
        var startInputIndex = getRowValueIndex.value * 6 - 6;
        var endInputIndex = getRowValueIndex.value * 6;
        if (getRowValueIndex.value != "") {
            var input1 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 6)).value;
            var input2 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 5)).value;
            var input3 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 4)).value;
            var input4 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 3)).value;
            var input5 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 2)).value;        
            var input6 = document.getElementById("testInput" + (getRowValueIndex.value * 6 - 1)).value;
                    }
    }
</script>

解决方案 »

  1.   

    这个应该不难吧，
    双击事件，获取当前的tr对象，copy一个，然后添加到里一个table里边。
      

  2.   

    给个思路吧
    为<td>附上onclick事件如:
    <td width="20%" valign="middle" onclick="show()"><input type="text" id="testInput1" value="" onkeydown="addRow('1')" /></td>js脚本<script>
          function show()
          {
             //第一种方法，直接获取页面上的值，获取方法是document.getElementById("testInput1").value;
               前提，必须将页面所有数据都获取到，否则达不到理想的效果，然后将获取到的数据放到空表中。。         //第二种方法，获取表中的主键值，然后根据主键值，去查询数据库，将找到的结果，放到空表中
               这种方法的缺点，就是增加数据库的访问频率，优点可以一次性的将数据都取出来。。
          }
    </script>
      

  3.   

    有意思，粗粗的写了个
    <!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>
    </head>
    <style type="text/css">
    table{
    border-collapse:collapse;
    border-color:#9B9BFF;
    font-size:14px;
    }#tbody1 tr{
    cursor:pointer;
    }.STYLE2 {color:#000000}
    </style>
    <script type="text/javascript">
    function $(sId){
    return document.getElementById(sId);
    }window.onload=function(){
    var aRows=$("tbody1").getElementsByTagName("tr");
    var i,nLen=aRows.length;
    var fn=function(){
    var _aInputs=$("testTable").getElementsByTagName("input");
    var _aCells=this.cells;
    var _i,_nLen=Math.min(_aInputs.length,_aCells.length);

    for(_i=0;_i<_nLen;_i++){
    _aInputs[_i].value=_aCells[_i]
       .innerHTML
                       .replace(/<[\S\s]*>|<\/[\S\s]*>/g,"");
    }
    }

    for(i=0;i<nLen;i++){
    aRows[i].ondblclick=fn;
    }
    }
    </script>
    <body>
    <div style="margin-right:10px;border:1px solid #CCCCCC;float:left">
    <table width="541" border="1" cellspacing="0" cellpadding="0">
    <thead>
            <tr>
                <td width="20%" align="center" bgcolor="#CCCCCC"><span class="STYLE2">补料单号</span></td>
                <td width="20%" align="center" bgcolor="#CCCCCC"><span class="STYLE2">规格</span></td>
                <td width="20%" align="center" bgcolor="#CCCCCC"><span class="STYLE2">原因判定</span></td>
                <td width="20%" align="center" bgcolor="#CCCCCC"><span class="STYLE2">材损</span></td>
                <td width="20%" align="center" bgcolor="#CCCCCC"><span class="STYLE2">数量</span></td>
            </tr>
        </thead>
        <tbody id="tbody1">
            <tr>
                <td align="right">11</td>
                <td align="right">12</td>
                <td align="right">13</td>
                <td align="right">14</td>
                <td align="right">15</td>
            </tr>
            <tr>
                <td align="right">21</td>
                <td align="right">22</td>
                <td align="right">23</td>
                <td align="right">24</td>
                <td align="right">25</td>
            </tr>
            <tr>
                <td align="right">31</td>
                <td align="right">32</td>
                <td align="right">33</td>
                <td align="right">34</td>
                <td align="right">35</td>
            </tr>
            <tr>
                <td align="right">41</td>
                <td align="right">42</td>
                <td align="right">43</td>
                <td align="right">44</td>
                <td align="right">45</td>
            </tr>
        </tbody>
    </table>
    </div><div style="float:left;border:1px solid #CCCCCC">
    <table  id="testTable" width="300" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="middle" bgcolor="#CCCCCC"><span class="STYLE2">补料单号</span></td>
            <td valign="middle"><input type="text"  value=""/></td>
        </tr>
        <tr>
            <td valign="middle" bgcolor="#CCCCCC"><span class="STYLE2">规格</span></td>
            <td valign="middle"><input type="text"  value=""/></td>
        </tr>
        <tr>
            <td valign="middle" bgcolor="#CCCCCC"><span class="STYLE2">原因判定</span></td>
            <td valign="middle"><input type="text"  value=""/></td>
        </tr>
        <tr>
            <td valign="middle" bgcolor="#CCCCCC"><span class="STYLE2">材损</span></td>
            <td valign="middle"><input type="text"  value=""/></td>
        </tr>
        <tr>
            <td valign="middle" bgcolor="#CCCCCC"><span class="STYLE2">数量</span></td>
            <td valign="middle"><input type="text"  value=""/></td>
        </tr>
    </table>
    </div>
    </body>
    </html>