Javascript 使用多行单元格操作HTML表中的行和列

我有一个包含跨多行单元格的html表：

  <table border="1" style=""><tbody id="x">
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td rowspan="3">**</td>
      <td>AAAA</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row2">
      <td>BBBB</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>CCCC</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td style="">&nbsp;</td>
      <td id="ee">EEEE</td>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td style="">&nbsp;</td>
      <td id="dd">DDDD</td>
      <td>&nbsp;</td>
   </tr>
  </tbody></table>

我试图用Javascript操作它，例如隐藏行2。 当我这样做时，包含**的多行单元格向下移动，将第3行中的所有单元格向右移动1。显然，我必须缩短它的行距。 但当我看第1行时，我似乎无法知道有一个多行单元格与这一行相交-似乎我必须扫描第2行上方的所有行以查找多行单元格

---

有没有更好/更快的方法来找出哪些多行单元格会影响隐藏或删除操作

我有一个解决方案，您不必计算Rowspan和Colspan

步骤1：获取上面提到的HTML内容并另存为EXCEL文件

步骤2：删除特定行，即第2行

步骤3：另存为HTML文件并读取HTML内容

---

您将获得正确格式的HTML

我有一个解决方案，您不必计算Rowspan和Colspan

步骤1：获取上面提到的HTML内容并另存为EXCEL文件

步骤2：删除特定行，即第2行

步骤3：另存为HTML文件并读取HTML内容

---

您将获得正确格式的HTML

使用javascript试试这个。。。它工作正常

更改范围[1到6]的currRowToDelete的值

---

使用javascript试试这个。。。它工作正常

更改范围[1到6]的currRowToDelete的值

---

tr元素不能处理显示：没有。您应该改为设置可见性：塌陷。请看李斯特先生的解决方案仅在FF中正常工作。显示在IE中工作，但Chrome和Opera似乎既不能显示也不能显示；我尝试了可见性，但在IE中它只显示空白行。我希望最初的目标是IE，然后再担心其他。tr元素不能处理显示：没有。您应该改为设置可见性：塌陷。请看李斯特先生的解决方案仅在FF中正常工作。显示在IE中工作，但Chrome和Opera似乎既不能显示也不能显示；我尝试了可见性，但在IE中它只显示空白行。我希望最初以IE为目标，然后再担心其他人。谢谢，但我正在尝试删除Javascript中的一行，否则我可以简单地重新呈现表格。谢谢，但我正在尝试删除Javascript中的一行，否则我可以简单地重新呈现表格。Sergei Veinberg-您尝试过上面的JS代码吗？这有用吗？Sergei Veinberg-你试过上面的JS代码吗？这有用吗？

<script type="text/javascript">
  alert ("index of dd before delete =" + document.getElementById("dd").cellIndex);
  document.getElementById("row2").style.display="none";
  alert ("index of dd after delete =" + document.getElementById("dd").cellIndex);
</script>

<table id="tbl" border="1" runat="server" >
   <tr id="row1">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row2">
      <td rowspan="3">**</td>
      <td>AAAA</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row3">
      <td>BBBB</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row4">
      <td>CCCC</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row5">
      <td style="">&nbsp;</td>
      <td id="ee">EEEE</td>
      <td>&nbsp;</td>
   </tr>
   <tr id="row6">
      <td style="">&nbsp;</td>
      <td id="dd">DDDD</td>
      <td>&nbsp;</td>
   </tr>
  </table>


<script type="text/javascript">
var trs = document.getElementById("tbl").getElementsByTagName("tr");
var tds;
var bDeleted = false;
var currRowToDelete = 3;

for(var i=0;i<currRowToDelete;i++)
{   
    tds = trs[i].getElementsByTagName('td');
    for(var j=0;j<tds.length;j++)
    {   
        var currRowSpan = tds[j].rowSpan;       
        if(currRowSpan > 1)       
        {           
            if(eval(i + 1) == currRowToDelete)
            {
                var cell = document.createElement("td");                        
                cell.innerHTML = tds[j].innerHTML;            
                trs[i + 1].insertBefore(cell, trs[i + 1].getElementsByTagName('td')[0]);                
                document.getElementById("tbl").deleteRow(i);
                bDeleted = true;
                document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);                
            }
            else
            {   
                if(eval(currRowSpan + i) >= currRowToDelete)
                    document.getElementById("tbl").rows[i].cells[0].rowSpan = eval(currRowSpan -1);             
            }
        }        
    }
}
if(bDeleted == false)
    document.getElementById("tbl").deleteRow(currRowToDelete -1);
</script>