Управление строками и столбцами в таблице 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, например, скрыть row2.Когда я это делаю, многорядная ячейка, содержащая «**», перемещается вниз, сдвигая все ячейки в ряду 3 на 1 вправо.Очевидно, я должен уменьшить его rowSpan.Но кажется, что когда я смотрю на строку 1, у меня нет возможности узнать, что есть многорядная ячейка, пересекающая эту строку - похоже, мне нужно отсканировать все строки над строкой 2 на наличие многорядных ячеек.

Есть ли лучший / более быстрый способ выяснить, какие многорядные ячейки влияют на операцию скрытия (или удаления)?

Answer 1

Попробуйте это, используя JavaScript ... Он работает правильно.

Измените значение currRowToDelete для диапазона [1 to 6].

См. Рабочий код: 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>

Answer 2

У меня есть решение, в котором вам не нужно вычислять Rowspan и Colspan.

Шаг 1: Получить содержимое HTML (как упомянуто выше) и сохранить как EXCEL file.

Шаг 2: Удалить конкретную строку (т.е. Row 2).

Шаг 3:Сохранить как HTML файл и прочитать содержимое HTML.

Вы получите HTML в правильном формате.