table要素を出力する

こんにちは。「Javaを復習する初心者」です。

今回はJavaScriptの話です。JavaScriptを使ってテキストエリアにtableのhtmlを出力する簡易ツールを作ってみましたという話です。

1 表示と動作
2 作成過程の概要
3 作ったもの

表示と動作

ここから表示と動作の説明とプログラムの説明になります。結局どんなのを作ったのかを知りたい方は最後の方を見ていただければ十分だと思います。

初期画面

行数と列数をプルダウンメニューで選択できる。選択できる値は1～5。
「入力欄生成」ボタンを押すと、tableのセルの内容入力欄、「HTML生成」ボタン、テキストエリアを表示する。

tableの内容入力画面

「HTML生成」ボタンを押すとtableのセルの内容入力欄の内容をtable要素に変換しテキストエリアに出力する。

作成過程の概要

ここからどんな感じで作っていったか概要を書きます。

行数、列数を選ぶ部分はselect要素使って、中身にoption要素並べてできます。隣のボタンはinput要素を使います。これらをformタグで挟んでonclick要素にJavaScriptの関数を指定しました。その関数は大体以下のような処理です。

テキストエリアの値を[フォームのname][selectのname].valueで取得。
テーブル要素をdocument.createElementで生成して。appendChildでtr、tdも追加して、セルの内容にinput要素追加。
「HTML生成」ボタンとしてinput要素を生成。setAttributeで色々設定。onClickにJavaScriptの関数を指定。
textarea要素も生成して追加。

以上のような流れです。jQueryを使わないため、DOM操作のメソッドを直接使ってます。「HTML生成」ボタンのonClickに設定したJavaScriptの関数は動的に生成した格子状に並ぶinput要素の内容を取得して、tableのhtmlを生成するようにします。動的に配置したボタンからJavaScriptの関数を呼び出せるのは不思議かもしれませんが、出来ました。

作ったもの

bodyの内容は以下です。

bodyの内容

<form name="tableConfigForm">
行数
<select name="numRows">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

列数
<select name="numCols">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<input type="button" value="入力欄生成" onclick="createTableCells()">
</form>

<form name="tablecells" id="tablecells">
</form>

idがtablecellsであるform要素がテーブルのセル入力欄をJavaScriptで挿入する箇所です。

JavaScriptは以下のように記述しました。

scriptの内容

    // 入力欄からなるテーブルを生成
    function createTableCells() {
        // テキストエリアの値を取得
        var numRows = tableConfigForm.numRows.value;
        var numCols = tableConfigForm.numCols.value;  
        
        
        // テーブル要素
        var table = document.createElement("table");
        table.setAttribute("id", "inputValuesTable");
        for (var row = 0; row < numRows; row++) {
            var rowElement = document.createElement("tr");
            for (var col = 0; col < numCols; col++) {
                var cellElement = document.createElement("td");
                var input = document.createElement("input");
                input.setAttribute("type", "text");
              
                cellElement.appendChild(input);
                rowElement.appendChild(cellElement);
            }
            table.appendChild(rowElement);
        }
        
        // input要素
        var inputButton = document.createElement("input");
        inputButton.setAttribute("type", "button");
        inputButton.setAttribute("name", "createHtml");
        inputButton.setAttribute("value", "HTML生成");
        inputButton.setAttribute("onclick", "showTabeHtml()");

        // textarea要素
        var textarea = document.createElement("textarea");
        textarea.setAttribute("id", "tableHtml");
        textarea.setAttribute("rows", "25");
        textarea.setAttribute("cols", "25");
        
        // 要素追加
        var targetForm = document.getElementById("tablecells");
        targetForm.textContent = null;
        targetForm.appendChild(table);
        targetForm.appendChild(inputButton);
        targetForm.appendChild(document.createElement("br"));
        targetForm.appendChild(textarea);
         
    }
    
    // 入力欄からHTMLを生成し、テキストエリアに出力
    function showTabeHtml() {
        var textarea = document.getElementById("tableHtml");
        var targetText = "";

        // 先にtableタグの中身から生成
        var table = document.getElementById("inputValuesTable");
        var trs = table.children;
        for (var i = 0; i < trs.length; i++) {
            targetText += "\t<tr>\n";
            var tds = trs[i].children;
            for (var j = 0; j < tds.length; j++) {
                targetText += "\t\t<td>" +  tds[j].children[0].value +"</td>\n" ;
            }
            targetText += "\t</tr>\n";
        }
        
        targetText = "<table>\n" + targetText + "</table>"
        
        textarea.textContent = targetText;

    }

createTableCells()メソッドは入力欄と出力欄を生成するメソッドです。セレクトボックスの値を読み取って、入力欄の表を出力しています。

showTabeHtml()は入力欄からtable要素のhtmlを出力するメソッドです。