关于动态<table> 急

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title><style>
TD,INPUT{ font-size:12; }
</style>
</head><body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>JK的动态明细示例</h4><table align="center" bordercolor=cccccc border=1  width=100% >
<tr>
<td width=500>
</td>
<td align=right>
      <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();">&nbsp;     
      <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();">&nbsp;     
      <input type="button"  value="完成" class="bottom" onclick="submitProcess();">
      
</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
  <tr bgcolor=eeeeee id="trDetailTitles"> 
    <td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
    <td >明细ID*</td>
    <td >明细NAME</td>
  </tr>
  <tbody id="tbDetailUsed" >
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr> <tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
  </tbody> </table>
</div>
</form><!--复制的内容-->
<table id="tbDetailPrepare" style="display:none">
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
</table>
<input name="theHistoryRecord" type=hidden value="">
</body></html><script language=javascript> window.onload = historyOncemore;
window.onbeforeunload = fixHistory; function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
} function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
} function selectallcheckbox(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}


function addDetailProcess(afterRowIndex) //增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
  theFirstSelectedDetail=alltbDetailUsed.length-2;
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow ); }

function delDetailProcess() //删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
} function submitProcess()
{
      document.frm.submit();
}
</script>

解决方案 »

  1.   

    这个应该能符合你的要求
    <HEAD><!-- 定义样式 -->
    <style>
    tr.trover
    {
    background-color:#FF0000;
    }
    tr.trout
    {
    background-color:#3399FF;
    }
    td.tdclass
    {
    background-color:#33FFFF;
    }
    </style>
    </HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    global_order = 2; //前面的id自增
    function save()
    {
    trd=document.all.tabA.insertRow();
    var newtr = document.all.tabA.rows;
    newtr[newtr.length-1].onclick = function() //呼叫tr里的onclick函数
    {
    tronclick();
    };
    newtr[newtr.length-1].onmouseover = function() //呼叫tr里的onmouseover函数
    {
    onClass(newtr[newtr.length-1]);
    };
    newtr[newtr.length-1].onmouseout = function() //呼叫tr里的onmouseout函数
    {
    outClass(newtr[newtr.length-1]);
    };
    v1=document.all("input1").value;
    v2=document.all("input2").value;
    v3=document.all("input3").value;
    v4=document.all("input4").value;
    v5=document.all("input5").value;

    trd.insertCell().innerHTML="<input type='radio' name='select' value='"+v1+"'"+"><SPAN>"+global_order+"</SPAN>";
    trd.insertCell().innerHTML="<SPAN calss=tdclass>"+v1+"</SPAN>"; trd.cells[trd.cells.length-1].className = "tdclass"; //改变单个td的样式，注意会覆盖tr的样式

    trd.insertCell().innerHTML="<SPAN>"+v2+"</SPAN>";
    trd.insertCell().innerHTML="<SPAN>"+v3+"</SPAN>";
    trd.insertCell().innerHTML="<SPAN>"+v4+"</SPAN>";
    trd.insertCell().innerHTML="<SPAN>"+v5+"</SPAN>";
    document.all("input1").value="";
    document.all("input2").value="";
    document.all("input3").value="";
    document.all("input4").value="";
    document.all("input5").value="";
    global_order++;
     }
    function tronclick()
    {
    alert("响应tronclick函数");
    }
    function onClass(obj)
    {//onmouseover
    obj.className ="trover";
    }
    function outClass(obj)
    {//onmouserout
    obj.className ="trout";
    }
    //-->
    </SCRIPT><BODY>
    <INPUT TYPE="text" NAME="input1"  value="AAA"><br>
    <INPUT TYPE="text" NAME="input2"  value="BBB"><br>
    <INPUT TYPE="text" NAME="input3"  value="CCC"><br>
    <INPUT TYPE="text" NAME="input4"  value="DDD"><br>
    <INPUT TYPE="text" NAME="input5"  value="EEE"><br><table id=tabA border=1>
    <tr  height=21 onclick="tronclick();" onMouseOver="onClass(this);" onMouseOut="outClass(this);" >
    <td nowrap height=21 ><input type="radio"   name="select"><SPAN>1</SPAN></td>
    <td nowrap><div>fdgfg</div></td>
    <td nowrap><div>fgfdsg</div></td>
    <td nowrap><div>fdsgfdgdsg</div></td>
    <td nowrap><div>fdsgfg</div></td>
    <td nowrap><div>fsg</div></td>
    </tr>
    </table>
    <INPUT TYPE="button" value="go" onclick="save();">
    </BODY>
      

  2.   

    trd=document.all.tabA.insertRow();
    trd.attachEvent("onclick",functionname);
    trd.attachEvent("onmouseover",functionname);
    trd.attachEvent("onmouseout",functionname);
    or
    trd.className="ddd";
    在style里定义
    ddd
    {
       mouseout的效果
    }
    ddd:hover
    {
       mouseover时的效果
    }