Zestaw colspan/rowspan dla komórki

Mam tabelę i chcę zmienić właściwość komórki w środowisku wykonawczym colspan/rowspan. Oto przykład:Zestaw colspan/rowspan dla komórki

<html> 
    <head> 
     <script type="text/javascript"> 
      function setColSpan() { 
       document.getElementById('myTable').rows[0].cells[0].colSpan = 2 
      } 
     </script> 
    </head> 

    <body> 
     <table id="myTable" border="1"> 
      <tr> 
       <td>cell 1</td> 
       <td>cell 2</td> 
      </tr> 
      <tr> 
       <td>cell 3</td> 
       <td>cell 4</td> 
      </tr> 
     </table> 
     <form> 
      <input type="button" onclick="setColSpan()" value="Change colspan"> 
     </form> 
    </body> 

</html>

Mój problem polega na tym, że komórki się zmieniają. Czy mam usunąć komórki, nad którymi znajduje się ta komórka?

Mogę zrobić bez usuwania?

Chcę zaimplementować prosty arkusz kalkulacyjny. Na razie udało mi się wybrać prostokątny zakres komórek i pokazać menu z opcją "Połącz wybrane komórki". Chciałbym móc "rozdzielić" komórki, więc dobrze byłoby rozpiąć komórki bez konieczności usuwania innych komórek.

Źródło

2013-02-01 warvariuc

Jeśli chcesz scalić komórki, to co z wartością? Czy chcesz połączyć wartości z obu komórek? – DON

@DON, Idealnie chciałbym zachować jakoś wartość (może to możliwe, aby ukryć "nadpisane" komórki?). Jeśli nie, po prostu usuń. – warvariuc

Myślę, że trzeba usunąć komórkę. Sprawdź poniższy kod. Usunąłem cały wiersz i dodałem nowy wiersz z nową rozpiętością kolumn

function setColSpan() { 
    var table = document.getElementById('myTable'); 
    table.deleteRow(0); 
    var row = table.insertRow(0); 
    var cell = row.insertCell(0); 
    cell.innerHTML= "cell 1" 
    cell.colSpan = 2 
}

Źródło

2013-02-01 04:25:57 999k

Komórki się zmieniają, ponieważ tak właśnie chcesz. Definiując tabelę taką jak ta:

<tr> 
    <td colspan="2">cell 1</td> 
    <td>cell 2</td> 
</tr> 
<tr> 
    <td>cell 3</td> 
    <td>cell 4</td> 
</tr>

Tak więc zmiana, którą widzisz, jest tym, czego oczekiwałbym.

Jeśli chcesz scalić komórki, musisz pobrać zawartość wszystkich scalonych komórek, połączyć je w jedną komórkę i usunąć resztę. Dla trywialnego przykładu wyglądałoby to tak:

function setColSpan() { 
    var myTable = document.getElementById('myTable'); 
    var cell2html = myTable.rows[0].cells[1].innerHTML; 
    myTable.rows[0].deleteCell(1); 
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html; 
    myTable.rows[0].cells[0].colSpan = 2; 
}

Jednak bardziej niezawodne rozwiązanie jest ... trochę skomplikowane. Zwłaszcza, jeśli chcesz, aby zdolność rozróżniania. Musiałbyś jakoś zachować informacje o starej strukturze komórkowej ... możliwe, że wprowadzisz coś w rodzaju scalonych danych? A następnie sprawdzając istnienie rozpiętości "oldCell", gdy się rozłączają? Ale wtedy musisz zachować te informacje poprzez edycje użytkownika. Dowiedz się, co to oznacza dla scalania między wierszami i kolumnami. A także dowiedzieć się, co to oznacza dla nakładających się połączeń.

Źródło

2014-04-14 14:49:09 spinn

Odpowiedz

Powiązane problemy