SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【Javascript】テーブルのセルを結合したり分割したりする

ソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テーブルのセルを結合したり分割したりする</title>
<style type="text/css">td {border:1px #333333 solid; padding:30px; font-size:50px;}</style>
<script type="text/javascript">
function xxx()
{
    var table = document.getElementById("table123")
    var tr = table.getElementsByTagName("tr")[0]
    var td1 = tr.getElementsByTagName("td")[0]
    var td2 = tr.getElementsByTagName("td")[1]
    
    if (td2) {
        tr.removeChild(td2)
        td1.colSpan = "3"
    } else {
        var td = document.createElement("td")
        td.innerHTML = "3"
        tr.appendChild(td)
        td1.colSpan = "2"
    }
}
</script>
</head>
<body>

<table id="table123">
<tr><td colspan="2">1</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>

<input type="button" value="button" onclick="xxx();" />

</body>
</html>

デモ

1 3
1 2 3

ボタンをクリックすると、テーブルのセルがひょこひょこ動きます。


keyworrd: colspan 動的

関連するメモ

コメント(2)

kom2 2010年8月13日 01:08

仕事でjavascriptを使う必要があってココに辿り着きました。
探していたのとは若干違いますが、javascriptは素人なので、大変参考になりました♪
思わず「美しい…」の言葉が漏れました(^^;;
ありがとうございましたm_(_ _)_m

yoshimura 2010年8月13日 10:15

コメントありがとうございます。
お役に立ったのでしたら何よりです♪