紧急求助 js操作table


我想用js在下面的2个tr上加上thead怎么加
<thead><tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION</td>
<td colspan="1">test 2</td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name</th>
<th scope="col">desc  </th>
<th scope="col">UPC</th>
</tr>
</thead><TABLE style="FONT-SIZE: 11px" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle>
<DIV>
<TABLE id=GridView1>
 <tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION</td>
<td colspan="1">test 2</td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name</th>
<th scope="col">desc  </th>
<th scope="col">UPC</th>
</tr><tr>
<td>test 1</td>
<td>test 2</td>
<td>test3</td>
</tr>
</TABLE>

解决方案 »

  1.   

    用INNERHTML 向DIV里写
    还有就是利用XML会方便些。。
    因为可以真接获取表头 和结尾 
      

  2.   

    首先加入jquery.js 然后
    <script type='javascript'>
    $(function({
    $("<thead>").before(".tr_01");
    $("</thead>").after(".tr_02");
    });
    </script> <tr class="tr_01" style="color:#F7F7F7;background-color:#003366;font-size:8pt;"> 
    <td colspan="2">test INFORMATION </td> 
    <td colspan="1">test 2 </td> 
    </tr> 
    <tr class="tr_02" style="color:#F7F7F7;background-color:#003366;font-size:8pt;"> 
    <th scope="col">name </th> 
    <th scope="col">desc  </th> 
    <th scope="col">UPC </th> 
    </tr> 记得给分啊
      

  3.   

    原生js操作
    请注意我给你的2个tr都加了id属性。<!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><body>
    <TABLE style="FONT-SIZE: 11px" cellSpacing=0 cellPadding=0 width="100%" border=0>
    <TBODY>
    <TR>
    <TD align=middle>
    <DIV>
    <TABLE id=GridView1>
    <tr id='thead1' style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
    <td colspan="2">test INFORMATION </td>
    <td colspan="1">test 2 </td>
    </tr>
    <tr id='thead2' style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
    <th scope="col">name </th>
    <th scope="col">desc  </th>
    <th scope="col">UPC </th>
    </tr> <tr>
    <td>test 1 </td>
    <td>test 2 </td>
    <td>test3 </td>
    </tr>
    </TABLE>
    <script type="text/javascript">
    //<![CDATA[
    var tb = document.getElementById('GridView1');
    var thd = document.createElement('thead');
    var tr1 = document.getElementById('thead1');
    var tr2 = document.getElementById('thead2');
    tb.insertBefore( thd, tb.firstChild );
    thd.appendChild( tr1 );
    thd.appendChild( tr2 );
    //]]>
    </script></body>
    </html>
      

  4.   


    <html><head><title></title></head><body>
    <table id="testTbl" border=1>
    <tr>
     <td>
      产品名称
     </td>
     <td>
      产品数量
     </td>
     <td>
     产品单价
     </td>
    </tr>
    <tr>
     <td>
     <select name="a">
       <option value="电子">电子</option>
       <option value="电器">电器</option>
     </select></td>
     <td>
        <input type="text" name="b">
         </td>
     <td>
        <input type="text" name="c">
         </td>
    </td>
    </table><input type="button" name="Submit2" value="添加" onclick="addRow()"><script>
    function addRow(){//添加行
    var newTr = testTbl.insertRow();//添加列var newTd0 = newTr.insertCell();var newTd1 = newTr.insertCell();var newTd2 = newTr.insertCell();var newTd3 = newTr.insertCell();//设置列内容和属性
    newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text; newTd1.innerText = document.all("b").value;newTd2.innerText = document.all("c").value;newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';}
    function del(o)
    {
     var   t=document.getElementById('testTbl');
      t.deleteRow(o.parentNode.parentNode.rowIndex)
    }
    </script> 
    </body></html>
    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/laolaowhn/archive/2008/05/04/2384009.aspx