※ ChatGPTを利用し、要約された質問です(原文:連動プルダウンのclonenode)
連動プルダウンのclonenodeで複製し、行を追加する方法
このQ&Aのポイント
連動プルダウンをclonenodeで複製し、行を追加する方法を説明します。
複製されたプルダウンを変更すると、最初の行のプルダウンに連動してしまう問題について解説します。
JavaScriptのaddRow関数を使用して連動プルダウンを複製し、行を追加する方法を示します。
質問お願いします。
連動プルダウンをclonenodeで複製し、行を追加するjavascriptを組みたいのですが、
複製されたプルダウンを変更すると、最初の行のプルダウンに連動してしまいます。
<html>
<head>
<title>連動プルダウン複製</title>
<script type="text/javascript">
/*@cc_on@*/
function addEvent(e, t, f){
e./*@if(1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ t, f, false);
}
function addRow(trigger){
var table = trigger.ownerDocument.getElementById('Table1');
// 最初の行こぴー
var row = table.rows[0].cloneNode(true);
row.id = 'ROW.' + table.rows.length;
// 最初のセレクト要素
select = row.getElementsByTagName('SELECT')[0];
select.name = 'column.' + table.rows.length;
// 最初の tbody に行追加
table.tBodies[0].appendChild(row);
}
function cText(evt){
var obj = evt.target || evt.srcElement;
// ...
}
</script>
</head>
<body>
<div>
<table id="Table1">
<tbody
<tr>
<td class="cellWhite">
<form>
設備停止項目:
<select name="column" onchange="SetSubMenu(value);">
<option value="stop" selected>休止</option>
<option value="check">点検・調整</option>
<option value="clean">清掃</option>
<option value="out">外部事情</option>
<option value="machien">機械故障</option>
<option value="ele">電気故障</option>
<option value="stone">砥石交換</option>
<option value="eat">食休</option>
</select>
</form>
</td>
<td>
<form id="stop" class="secondpulldown">
設備停止理由:
<select>
<option value="">余力</option>
<option value="">SD</option>
<option value="">自家整備</option>
<option value="">日報収集</option>
</select>
</form>
<form id="check" class="secondpulldown">
設備停止理由:
<select>
<option value="">部品交換</option>
<option value="">調整</option>
<option value="">給油</option>
<option value="">MT検査応援</option>
</select>
</form>
<form id="clean" class="secondpulldown">
設備停止理由:
<select>
<option value="">始業時</option>
<option value="">終業時</option>
<option value="">中間時</option>
<option value="">スケールバック上げ</option>
<option value="">集塵機バック上げ</option>
</select>
</form>
<form id="out" class="secondpulldown">
設備停止理由:
<select>
<option value="">給材時</option>
<option value="">集材時</option>
<option value="">停電</option>
</select>
</form>
</td>
<td>
<form id="time" class="thirdpulldown">
設備停止時間:<input type="text" width=65 size=8 style=text-align:right pattern="[0-9]*"/>
</form>
</td>
</tr>
</tbody>
</table>
<input type="button" value="行追加" onclick="addRow(this)">
</div>
</body>
</html>
わかる方いらっしゃいましたら、ご回答よろしくお願いします。