最近の更新

2012年9月18日火曜日

テーブル内の結合されたセルのOffsetWidth・OffsetHeightを出力する方法

【目的】
JavaScriptで、テーブル内の結合されたセルのOffsetWidth・OffsetHeightを出力します。



【手順】
1.「015-PrintAllJoinedTdOffsetWidthJS.html」というファイルを作成。
2.「015-PrintAllJoinedTdOffsetWidthJS.html」を以下の様に入力。
<html>
<head>
    <script type="text/javascript">
    function main() {
        var tdCount = 0;
        var inputText = "";
        for (var i = 0; i < table1.rows.length; i++) {
            for (var j = 0; j < table1.rows[i].cells.length; j++) {
                inputText += (++tdCount) + ":" + table1.rows[i].cells[j].innerHTML
                          + ":offsetHeight=" + table1.rows[i].cells[j].offsetHeight
                          + "/offsetWidth=" + table1.rows[i].cells[j].offsetWidth + "<br/>";
            }
        }
        out.innerHTML = inputText;
    }
    </script>
</head>
<body>
    <table id="table1" border="1">
        <tr>
            <td>セル1-1</td>
            <td>セル1-2</td>
            <td colspan="2">セル1-3</td>
        </tr>
        <tr>
            <td>セル2-1</td>
            <td>セル2-2</td>
            <td>セル2-3</td>
            <td>セル2-4</td>
        </tr>
        <tr>
            <td rowspan="2">セル3-1</td>
            <td>セル3-2</td>
            <td rowspan="2" colspan="2">セル3-3</td>
        </tr>
        <tr>
            <td>セル4-1</td>
        </tr>
    </table>
    <input type="button" value="実行" onclick="main();">
    <div id="out" />
</body>
</html>

3.「015-PrintAllJoinedTdOffsetWidthJS.html」をブラウザで開きます。
4.以下の様に表示されれば成功です。










































以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事