※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%">項目１</td>
<td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目２</td>
<td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目３</td>
<td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目４</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='１'>１</option>
<option value='２'>２</option>
<option value='３'>３</option>
<option value='４'>４</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='１'>１</option>"
+ "<option value='２'>２</option>"
+ "<option value='３'>３</option>"
+ "<option value='４'>４</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];
}
要約すると
１．tableの増減の操作はJavascriptで行います。
２．submitをした際に特定の名前（サンプルでは「_」）で終わっているものに通し番号を付け、件数を設定します。
３．PHPにて件数分ループして値を取得します。
