关于动态添加/删除/移动表格行的问题

这是Javascript的源码，html部分因为有字符限制就只写了相关按钮的代码。
功能说明：：点击第一个add按钮,在Insert Bracker按钮下面的表格中添加remove按钮(用于删除行)2个按钮(用于调整表格行的顺序)，4个下拉框(其中3个对应add按钮行的3个下拉框，还有一个是括号的选项)
点击Insert Bracker按钮将在表格中添加与各按钮，2个下拉框（内容见html页面）。
实现的功能有点类似于购物车：下面是html中的代码：
<body class="FONTStyle">
<form id="FormMain" method="post">
<input type="hidden" name="provalue" value="1" />
<input type="radio" name="Use Filter Helper" checked="checked"/>
<font color="#0066CC"><b>User Filter Helper</b></font>
<table width="740" height="120" border="0" id="DataTb">
  <tr>
    <th width="106" height="29" align="right" scope="col"></th>
    <th width="200" scope="col" align="center"><font size="-1" face="Arial, Helvetica, sans-serif">Field</font></th>
    <th width="200" scope="col" align="center"><font size="-1" face="Arial, Helvetica, sans-serif">Option</font></th>
    <th width="175" scope="col" align="center"><font size="-1" face="Arial, Helvetica, sans-serif">Value</font></th>
    <th width="37" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th height="48" align="right" scope="row"><font size="-1" face="Arial, Helvetica, sans-serif">Profile Field</font></th>
    <td align="center"><select name="ComboField" id="combofield" style="width:200" class="FONTStyle" onChange="javascript:ChangeOption()">
      <option selected="selected">EmailAddr</option>
      <option>FirstName</option>
      <option>LastName</option>
      <option>PlatForm</option>
      <option>ClientUnsubscribe</option>
      <option>ValidEmailAddr</option>
      <option>HtmlCapable</option>
      <option>ClcStatus</option>
      <option>No</option>
      <option>Age</option>
      <option>gender</option>
      <option>interest</option>
      <option>product</option>
      <option>Kevin_DM_test</option>
      <option>Title</option>
      <option>CompanyName</option>
      <option>interest2</option>
      <option>MarketSector</option>
      <option>New</option>
      <option>Lanuage</option>
      <option>Location</option>
      <option>Frequency</option>
      <option>Nationnality</option>
      <option>Source</option>
      <option>PointsBalance</option>
      <option>datasrc</option>
      <option>usertype</option>
      <option>Member_ID</option>
      <option>Unsubscribe</option>
      <option>SiteClcStatus</option>
    </select></td>
    <td align="center"><select name="ComboOption" id="combooption" style="width:200" size="1" class="FONTStyle">
<script language="javascript">
if(document.all.ComboField.value==0)
{
     document.all.ComboOption.add(new Option("is",1));
 document.all.ComboOption.add(new Option("is not",2));
 document.all.ComboOption.add(new Option("starts with",3));
 document.all.ComboOption.add(new Option("does not start with",4));
     document.all.ComboOption.add(new Option("ends with",5));
     document.all.ComboOption.add(new Option("does not end with",6));
     document.all.ComboOption.add(new Option("comes before",7));
 document.all.ComboOption.add(new Option("comes after",8));
 document.all.ComboOption.add(new Option("comes before or is equal to",9));
 document.all.ComboOption.add(new Option("comes after or is equal to",10));
 document.all.ComboOption.add(new Option("cantain",11));
 document.all.ComboOption.add(new Option("does not contain",12));
 document.all.ComboOption.add(new Option("is null",13));
 document.all.ComboOption.add(new Option("is not null",14));
 document.all.ComboOption.add(new Option("is empty",15));
 document.all.ComboOption.add(new Option("is not empty",16));
 }
</script>
</select></td>
    <td align="center"><input type="text" name="txtValue" id="txtvalue" height="20" size="25"/></td>
    <td align="center"><input type="button" name="btnAddField" value="Add" onClick="javascript:AddInfo()">
</td>
  </tr>
  <tr>
    <th height="35" align="right" scope="row"><font size="-1" face="Arial, Helvetica, sans-serif">Profile Date Field</font></th>
    <td align="center"><select name="ComboOption" id="combooption" style="width:200" class="FONTStyle">
<option selected="selected">JoinDate</option>
<option>Client_FirstJoinDate</option>
<option>Client_LastClickDate</option>
<option>Client_LastOpenDate</option>
<option>Client_LastSpotlightPurchaseDate</option>
<option>Client_LastSpotlightEventDate</option>
<option>trialdate</option>
<option>Site_FirstJoinDate</option>
<option>Site_LastClickDate</option>
<option>Site_LastOpenDate</option>
<option>Site_LastSpotlightPurchaseDate</option>
<option>Site_LastSpotlightEventDate</option>
</select></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td align="center"><input type="button" name="btnAddDate" value="Add" /></td>
  </tr></table>
<label style="background-color:#006699;width:800"><font color="#FFFFFF"><b>Expression Builder</b></font></label><br>
<input type="button" name="btnInsert" value="Insert Bracket" class="FONTStyle" 
onClick="javascript:AddNullInfo()"/>
<table cellpadding="0" border="0" id="FilterInfo">
</table>
<p class="FONTStyle">&nbsp;</p>
<p class="FONTStyle"><label style="background-color:#006699;width:800"><font color="#FFFFFF"><b>Expression</b></font></label></p>
</form>
</body>

解决方案 »

  1.   

    代码没看，如果只是解决表格的动态添加、删除、移动行，有如下代码可供参考
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
    <style>
    .btnstyle {
    font-weight: bolder;
    background-color: buttonface;
    BORDER-LEFT: 1px buttonhighlight solid; 
    BORDER-TOP: 1px buttonhighlight solid; 
    BORDER-RIGHT: 1px buttonshadow solid; 
    BORDER-BOTTOM: 1px buttonshadow solid; 
    CURSOR: hand;
    }
    .xbutton {
    font-size: 12px;
    border: 1px #959595 solid;
    background-color: #F5F5F5;
    height: 22px;
    padding: 0px;
    text-align: center;
    width: 70px;
    margin-left: 5px;
    }
    </style>
     </HEAD> <BODY>
    <table width=100% cellpadding=0 cellspacing=1 border=0 id=fList bgcolor=#000000>
    <tr style=position:relative;top:expression(this.offsetParent.scrollTop) bgcolor=#000000>
    <td class=btnstyle width=3%>&nbsp;</td>
    <td class=btnstyle width=30%>费用名称</td>
    <td class=btnstyle width=17%>数量</td>
    <td class=btnstyle width=25%>单价</td>
    <td class=btnstyle width=25%>金额</td>
    </tr>
    </table>
    <table width=100% border=0 cellspacing=0 cellpadding=0>
    <tr height=30px valign=bottom>
    <td align=left>
    <button class=xbutton onclick=doInsertRow() title=新增配件明细><!--<img src=../../images/insert.gif align=absmiddle>&nbsp;-->添　加</button>
    <button class=xbutton onclick=doDeleteRow() title=删除选定行><!--<img src=../../images/delete.gif align=absmiddle>&nbsp;-->删　除</button>
    <button class=xbutton onclick=doMoveUp() title=上移选定行><!--<img src=../../images/arrowup.gif align=absmiddle>&nbsp;-->上　移</button>
    <button class=xbutton onclick=doMoveDown() title=下移选定行><!--<img src=../../images/arrowdown.gif align=absmiddle>&nbsp;-->下　移</button>
    </td>
    </tr>
    </table>
    <script>
    var CurrentTable = document.getElementById("fList");
    function doMoveUp(){
    var i = 1;
    do
    {
    if(CurrentTable.rows[i].cells[0].firstChild.checked){
    if(i > 1 && !CurrentTable.rows[i - 1].cells[0].firstChild.checked){
    var oTr = CurrentTable.insertRow(i - 1);
    var oTd;
    for(var n=0; n<CurrentTable.rows[0].cells.length; n++){
    oTd = oTr.insertCell();
    oTd.className = CurrentTable.rows[i + 1].cells[n].className;
    oTd.style.backgroundColor = CurrentTable.rows[i + 1].cells[n].style.backgroundColor;
    oTd.innerHTML = CurrentTable.rows[i + 1].cells[n].innerHTML;
    }
    CurrentTable.deleteRow(i + 1);
    }
    }
    i += 1;
    }
    while (i<CurrentTable.rows.length);
    }function doMoveDown(){
    var i = l = CurrentTable.rows.length - 1;
    do
    {
    if(CurrentTable.rows[i].cells[0].firstChild.checked){
    if(i < l && !CurrentTable.rows[i + 1].cells[0].firstChild.checked){
    var oTr = CurrentTable.insertRow(i + 2);
    var oTd;
    for(var n=0; n<CurrentTable.rows[0].cells.length; n++){
    oTd = oTr.insertCell();
    oTd.className = CurrentTable.rows[i].cells[n].className;
    oTd.style.backgroundColor = CurrentTable.rows[i].cells[n].style.backgroundColor;
    oTd.innerHTML = CurrentTable.rows[i].cells[n].innerHTML;
    }
    CurrentTable.deleteRow(i);
    }
    }
    i -= 1;
    }
    while (i>0);
    }
    function doInsertRow(){
    var oTr = CurrentTable.insertRow();
    var oTd;
    oTd = oTr.insertCell(); oTd.className = "btnstyle"; setTD(oTd);
    oTd = oTr.insertCell(); oTd.style.backgroundColor = "#FFFFFF"; setTD(oTd);
    oTd = oTr.insertCell(); oTd.style.backgroundColor = "#FFFFFF"; setTD(oTd);
    oTd = oTr.insertCell(); oTd.style.backgroundColor = "#FFFFFF"; setTD(oTd);
    oTd = oTr.insertCell(); oTd.style.backgroundColor = "#FFFFFF"; setTD(oTd);
    return oTr.rowIndex;
    }function setTD(td){
    var id = td.parentNode.rowIndex;
    switch(td.cellIndex){
    case 0 : td.style.textAlign = "center"; td.innerHTML = "<input type=checkbox name=fsortid>"; break;
    case 1 : td.innerHTML = "<input type=text class=gridInput style='width:100%' id=fpname_"+id+" name=fp_name onkeypress='doKeyPressed(this)'>"; break;
    case 2 : td.innerHTML = "<input type=text class=gridInput style='width:100%' id=fpnum_"+id+" name=fp_num onchange='doCount(this)' onkeypress='doKeyPressed(this)' value='0.00'>"; break;
    case 3 : td.innerHTML = "<input type=text class=gridInput style='width:100%' id=fpprice_"+id+" name=fp_price onchange='doCount(this)' onkeypress='doKeyPressed(this)' value='0.00'>"; break;
    case 4 : td.innerHTML = "<input type=text class=gridInput style='width:100%' id=fpmoney_"+id+" name=fp_money onchange='doCount(this)' onkeypress='doKeyPressed(this)' value='0.00'>"; break;
    }
    }function doDeleteRow(){
    var i = 1;
    if(CurrentTable.rows[i]){
    do
    {
    if(CurrentTable.rows[i].cells[0].firstChild.checked){
    CurrentTable.deleteRow(i);
    }else{
    i += 1;
    }
    }
    while (i < CurrentTable.rows.length);
    }
    }
    </script>
     </BODY>
    </HTML>
      

  2.   

    问题是：表格中的行列都是通过下列语句动态添加的： var newTbr=FilterInfo.insertRow(); 
      var newTd0 = newTbr.insertCell();Td0.innerHTML="";问题出在：只要innerHTML中出现类似onclick="functionName"的语句，就会出错  
      

  3.   

    function AddNullInfo()
    {
        var i=0;
    var newTr=FilterInfo.insertRow();
    var newTd0 = newTr.insertCell();  
    //Set TableCell's properties
    newTd0.innerHTML = '<input type="button" id=\"removeBtn\" value="Remove" onClick=\"javascript:DelTabelRow(this)\">';//如果添加这句，就会在下面报错 
    var newTd1 = newTr.insertCell();       newTd1.innerHTML= '<input type="button" id="DownBtn" value="^" style="width:30px;height:25px;" onClick="moveUp()">';  var newTd2=newTr.insertCell();
    newTd2.innerHTML='<input type=\"button\" id="UpBtn" value="V" style="width:30px;height:25px;" onClick="moveDown()">';
    var newTd3=newTr.insertCell();
    newTd3.innerHTML='<select name="RelSel"><option value="">-Null-</option><option>AND</option><option>OR</option></select>';
    var newTd4=newTr.insertCell();
    newTd4.innerHTML='<select name=\"KuoSel\"><option>(</option><option>((</option><option>(((</option><option>)</option><option>))</option><option>)))</option></select>';}
    function cleanWhitespace(element) {
     //遍历element的子结点
     for (var i = 0; i < element.childNodes.length; i++) {
      var node = element.childNodes[i];
      //判断是否是空白文本结点，如果是，则删除该结点
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
      node.parentNode.removeChild(node);
     }
    }
    //获得表格对象
    var _table=document.getElementById("FilterInfo");
    cleanWhitespace(_table);
    //使表格行上移，接收参数为链接对象
    function moveUp(){
     //通过链接对象获取表格行的引用
     var _row=_a.parentNode.parentNode;
     //如果不是第一行，则与上一行交换顺序
     if(_row.previousSibling)swapNode(_row,_row.previousSibling);
    }
    //使表格行下移，接收参数为链接对象
    function moveDown(){
     //通过链接对象获取表格行的引用
     var _row=_a.parentNode.parentNode;
     //如果不是最后一行，则与下一行交换顺序
     if(_row.nextSibling)swapNode(_row,_row.nextSibling);
    }
    //定义通用的函数交换两个结点的位置
    function swapNode(node1,node2){
     //获取父结点
     var _parent=node1.parentNode;
     //获取两个结点的相对位置
     var _t1=node1.nextSibling;
     var _t2=node2.nextSibling;
     //将node2插入到原来node1的位置
     if(_t1)_parent.insertBefore(node2,_t1);
     else _parent.appendChild(node2);
     //将node1插入到原来node2的位置
     if(_t2)_parent.insertBefore(node1,_t2);
     else _parent.appendChild(node1);
    }
    <input type="button" name="btnInsert" value="Insert Bracket" class="FONTStyle" 
    onClick="javascript:AddNullInfo()"/>//报错：该对象不存在
      

  4.   

    大概看你的表格结构，你删除行的时候就没获取对对象，修改你的DelTabelRow如下，对应的对象下面已经表好给你了function DelTabelRow(obj) 
    { 
        var clickedRow=obj; 
        // button    td         tr         tbody
        clickedRow.parentNode.parentNode.parentNode.removeChild(clickedRow.parentNode.parentNode)
        //clickedRow.parentNode.removeChild(clickedRow); 
    } 
      

  5.   

    需不需要像excel一样操作表格，可以合并，拆分单元格，动态添加，插入行列，动态调整表格高度，宽度。删除行列。
      

  6.   

    onclick后面可以直接跟方法名啊，不需要javascript。你可以试试。你这些代码不全，很难给你调试
      

  7.   

    好的 ，谢谢。我看了一下：是innerHTML的问题，我设置的innerHTML中有script标签，貌似是这个的问题