2013-02-01 3 views
6

テーブルがあり、実行時にセルのcolspan/rowspanプロパティを変更したいと思います。ここに例があります:セルのcolspan/rowspanを設定します

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

私の問題は、細胞がシフトすることです。問題の細胞が広がる細胞を除去するはずですか?

削除しないといいですか?

シンプルなスプレッドシートを実装したいと思います。今のところ私は矩形範囲のセルを選択し、「選択されたセルをマージする」オプション付きのメニューを表示することができました。私は細胞を「アンマージ」することができたいので、他の細胞を除去することなく細胞を広げることが良いでしょう。

+0

セルをマージしたい場合、その値はどうですか?両方のセルの値を連結しますか? – DON

+0

@DON、理想的には何とか値を保持したいのです(おそらく、上書きされたセルを隠すことは可能でしょうか?)。そうでない場合は、削除してください。 – warvariuc

答えて

15

セルを削除する必要があると思います。以下のコードで確認してください。私がやったことは行全体を削除し、新しい列スパンで新しい行を追加しました

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

これはあなたの言うことです。あなたはこのようにテーブルを定義している:

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

だから、あなたが見ているシフトは、私が期待するものです。

セルをマージする場合は、マージされたすべてのセルの内容を1つのセルに連結して残りを削除する必要があります。簡単な例では、次のようになります。

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

しかし、より堅牢なソリューションは複雑です。特に、マージ解除する機能が必要な場合。あなたは何とか古いセル構造の情報を保存しなければならないでしょう...おそらく、<span class="oldCell">cell 2</span>のようなものをマージされたデータの周りに置いていますか?そして、unmerging時に "oldCell"スパンの存在をチェックしますか?しかし、ユーザーの編集によってその情報を保持する必要があります。行と列をまたいだマージの意味を理解してください。また、重複マージの意味を理解する。

関連する問題