请问JS纵向合并单元格后，如何遍历新的table，分别赋值innerHTML

window.onload = function(){
    var tab = document.getElementById("datatable");
    var name,rid
    name  ="",rid=0;
    count = 1;
    for(var i=1; i<tab.rows.length; i++){
        if(name == tab.rows[i].cells[1].innerHTML ){
            count++;
        }else{
            if(count > 1){ //合并
                start = i - count;
                tab.rows[start].cells[1].rowSpan  = count;
tab.rows[start].cells[0].rowSpan  = count;
                for(var j=start+1; j<i; j++){
                    for(var k=0; k<2; k++){
                        tab.rows[j].removeChild(tab.rows[j].cells[0]);
                    }
                }
                count = 1; tab.rows[i].cells[0].innerHTML=rid; 
rid=parseInt(rid)+1;
            }/*else if(count == 1){
tab.rows[i].cells[0].innerHTML=rid; 
rid=parseInt(rid)+1;
}*/
            name = tab.rows[i].cells[1].innerHTML;    
 
        }
    }
    
}; 
这是合并单元格的函数，我希望合并完后，在第一列显示序号1，2，3，4，5，依次
我在第一列的TD里加了1个ID的属性，rid1,rid2,rid3,rid3..依次
我现在发现如果我循环遍历我合并完了的TABLE的时候，
被合并，并且被上面的函数removeChild掉了的TD的ID也会也被抓取到，

解决方案 »

  1.   

    是的，removeChild掉了的TD的ID是会被抓到的，在FF下是不会被抓到的
    合并后需要重置一下id吧
      

  2.   

    难道IE偷懒了？
    在removeChild之前，先把单元格的ID置为deled，难道重名不犯罪。之后遍历碰到deled就知道了。
      

  3.   


    用jquery 比较简单<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>取值并合并</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function () {
    $("input").click(function () {
    merge(1);//合并第3列
    });
    });
    function merge(cols) { 
    var result = 0;
    var tr = $("#tab tr");
    tr.each(function (i) {//tab是table id
    var td = $(this).find("td:eq(" + (cols - 1) + ")");
    result += eval(td.text()) || 0;
    if (i != 0) {
    td.remove();
    } else {
    td.attr("rowspan", tr.size());
    }
    }).end().find("td:eq(" + (cols - 1) + ")").text(result);
    }
    </script>
    </head><body>
    <input type="button" value="合并取值" />
    <table width="500" border="1" cellspacing="0" cellpadding="0" id="tab">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table>
    </body>
    </html>