は、私は複数行にまたがるセルを持つHTMLテーブルを持っている

Question

複数行のセルを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> 

---

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

私はJavascriptで、例えば、それを操作しようとしています行2を非表示にします。 これを実行すると、「**」を含む複数行のセルが下に移動し、3行目のすべてのセルが1ずつ右に移動します。明らかに私はそのrowSpanを減らさなければならない。 しかし、私は行1を見ているようですが、私はこの行と交差する複数行のセルがあることを知る方法がありません - 複数行のセルに対してrow2より上のすべての行をスキャンする必要があるようです。

複数の行のセルが隠蔽（または削除）操作にどのような影響を与えるかを調べるためのより良い/迅速な方法はありますか？

Answer 1

解決策がありますが、RowspanとColspanを計算する必要はありません。

手順1：HTMLの内容を取得して（前述のように）EXCELという名前で保存します。

工程2：（即ちRow 2）特定の行を削除します。

ステップ3：HTMLファイルとして保存し、HTMLコンテンツをお読みください。

正しい形式でHTMLが表示されます。

Answer 2

javascriptを使って試してください...正常に動作しています。

範囲[1 to 6]の値をcurrRowToDeleteに変更してください。 NONE`うまく： `tr`要素は`表示を処理しない

Refer for working code: http://jsfiddle.net/arunkumrsingh/cdS2D/1/

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