【Javascript】テーブルのセルを結合したり分割したりする
Category JavaScript
/ Tagged コード断片
2010/06/24
ソース
<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 動的
仕事でjavascriptを使う必要があってココに辿り着きました。
探していたのとは若干違いますが、javascriptは素人なので、大変参考になりました♪
思わず「美しい…」の言葉が漏れました（＾＾；；
ありがとうございましたm_(_ _)_m
コメントありがとうございます。
お役に立ったのでしたら何よりです♪