<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>code by meixx</title>
<script language="JavaScript">
<!--
var selectRow=null;//记录上一次click过的行
var pointRow=null;//记录上次mouseover过的行function moveRow(src){
   if(pointRow!=null)
      pointRow.style.backgroundColor="#FFFFFF";
   if(src!=selectRow){
      pointRow=src;
      pointRow.style.backgroundColor="#B6D3FC";
   }
}
function clickRow(src){
   if(selectRow!=null){
      selectRow.style.backgroundColor="#FFFFFF";
      selectRow.style.color="#000000";
   }
   selectRow=src;
   selectRow.style.backgroundColor="#0000FF";
   selectRow.style.color="#FFFFFF";
   pointRow=null;
}
function testOut(src){
event.cancelBubble = true;
//alert(window.event.srcElement.tagName);
}
//-->
</script></head><body>
<table onmouseout="testOut(this)" width="100%"  border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#000000">
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table></body>
</html>

解决方案 »

  1.   

    <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>