【Web】JavascriptでのTableの増減とPHPでのPOST受け取り方法

※Web関連のプログラム等を作成の備忘録的なものになります。
今回は任意の数のパラメータを渡す方法です。
方法はいろいろあるかと思いますが、今回紹介する方法はJavaScriptでテーブルの行を増減させ、SUBMITする直前にフォーム部品の名前を変更します。

サンプルソース

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>サンプル</title>
        <script src="table_smple.js"></script>
</head>
<body>
<form action="table_sample.php" name="SampleForm" method="post" onSubmit="return false;">
        <input type="hidden" name="count" id="count_id" value="0">
        <table width="100%" cellpadding="3" cellspacing="1" id="table">
            <tbody>
                <tr>
                    <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="8%">操作</td>
                    <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目1</td>
                    <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目2</td>
                    <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目3</td>
                    <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目4</td>
                </tr>
                <tr>
                    <td style="border: 1px solid #cccccc;" align="left" colspan="5"><input type="button" value="入力欄追加" onclick="insertTable ()"></td>
                </tr>
                <tr>
                    <td style="border: 1px solid #cccccc;"><input type='button' value='削除' onclick='deleteTable (getSort(this.parentNode.parentNode));'></td>
                    <td style="border: 1px solid #cccccc;">
                        <select name='params1_'>
                            <option value="">選択してください</option>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                        </select>
                    </td>
                    <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params2_'></td>
                    <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params3_'></td>
                    <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params4_'></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="実行" onclick="setParamsName (); submit ();" />
    </form>
</body>
</html>

「table_smple.js」にはテーブル操作などのソースを記入します

        /**
        * 行追加
        */
        function insertTable () {
            var table1 = document.getElementById ("table");
            var row = table1.insertRow (2); // 行を追加(見出し、追加ボタンの次の行)
            var cell0 = row.insertCell (0); // セルを追加
            var cell1 = row.insertCell (1); // セルを追加
            var cell2 = row.insertCell (2); // セルを追加
            var cell3 = row.insertCell (3); // セルを追加
            var cell4 = row.insertCell (4); // セルを追加
            cell0.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定
            cell1.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定
            cell2.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定
            cell3.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定
            cell4.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定
            //セルに内容を設定
            cell0.innerHTML = "<input type='button' value='削除' onclick='deleteTable (getSort(this.parentNode.parentNode));'>";
            cell1.innerHTML = "<select name='params1_'>"
                            + "<option value='' > 選択してください </option>"
                            + "<option value='1'>1</option>"
                            + "<option value='2'>2</option>"
                            + "<option value='3'>3</option>"
                            + "<option value='4'>4</option>"
                            + "</select>";
            cell2.innerHTML = "<input type='text' value='' name = 'params2_' > ";
            cell3.innerHTML = "<input type='text' value='' name = 'params3_' > ";
            cell4.innerHTML = "<input type='text' value='' name = 'params4_' > ";
        }
        /**
        * 入力欄削除
        */
        function deleteTable (row) {
            document.getElementById ("table").deleteRow (row);
        }
        /**
        * 順番を調べる
        */
        function getSort (target) {
            var nodeLists = document.getElementById ("table").childNodes[1].childNodes;
            var trCount = - 1;
            for (var i = 0; i < nodeLists.length; i++) {
                var node = nodeLists.item (i);
                if (node.tagName == "TR") {
                    trCount++;
                }
                if (node == target) {
                    return trCount;
                }
            }
            return 0;
        }
        /**
        * パラメータ名を設定
        */
        function setParamsName () {
            // 項目数を設定
            var nodeLists = document.getElementById ("table").childNodes[1].childNodes;
            // 名前を設定
            var cnt = 0 - 2; //見出し、追加ボタン分減算
            for (var r = 0; r < nodeLists.length; r++) {
                if (nodeLists.item (r).nodeName != "TR") {
                    continue;
                }
                var tdLists = nodeLists.item (r).childNodes;
                for (var d = 0; d < tdLists.length; d++) {
                    if (tdLists.item (d).nodeName != "TD") {
                        continue;
                    }
                    // 内容を修正
                    var params = tdLists.item (d).childNodes;
                    for (var p = 0; p < params.length; p++) {
                        var node = params.item (p);
                        if (node.nodeName != "INPUT"
                        &&  node.nodeName != "TEXTAREA"
                        &&  node.nodeName != "SELECT") {
                            continue;
                        }
                        if (node.name.lastIndexOf ("_") == node.name.length - 1) {
                            node.name = node.name + cnt;
                        }
                    }
                }
                cnt++;
            }
            document.getElementById ("count_id").value = cnt;
        }

「table_sample.php」で上記ソースで入力したパラメータの取得する方法は下記のようになります。(一例)

$count = $_POST ['count'];
$params1 = array_fill (0, $count, "");
$params2 = array_fill (0, $count, "");
$params3 = array_fill (0, $count, "");
$params4 = array_fill (0, $count, "");
for ($i = 0; $i < $count; $i++) {
    $params1 [$i] = $_POST ['$params1_' . $i];
    $params2 [$i] = $_POST ['$params2_' . $i];
    $params3 [$i] = $_POST ['$params3_' . $i];
    $params4 [$i] = $_POST ['$params4_' . $i];
}

要約すると
1.tableの増減の操作はJavascriptで行います。
2.submitをした際に特定の名前(サンプルでは「_」)で終わっているものに通し番号を付け、件数を設定します。
3.PHPにて件数分ループして値を取得します。

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Optionally add an image (JPEG only)