JS example:ボタンtableをクリックして1行追加し、1行削除
4927 ワード
追加ボタンをクリックしてtableに1行追加するには、js制御で追加する2つの方法があります.もう1つはhtml要素とinnerHTMLを直接使うことですが、ここでは主にjsで制御することを言っています.これは調整しやすいからです.ここで理解すべきいくつかの知識点は、appendChild、firstChild、cloneNode(false or true)、chidNodes、childNodes[i]、style=「display:none」、innerHTML、toString()、typeof.nowrap,size(inputボックス表示サイズ)、maxlength(inputボックス入力サイズ)
考え方:
1表示テーブル
2テンプレートtable(style=「display:none」を非表示)
3追加ボタンをクリックしてイベントをトリガー
テンプレートtableの行を表示tableに追加
(table1.firstChild.appendChild(table2.firstChild.firstChild.cloneNode(true)))
例:
考え方:
1表示テーブル
2テンプレートtable(style=「display:none」を非表示)
3追加ボタンをクリックしてイベントをトリガー
テンプレートtableの行を表示tableに追加
(table1.firstChild.appendChild(table2.firstChild.firstChild.cloneNode(true)))
例:
<script>
// table
function addTableRow() {
var table1 = document.getElementById('table1');
var cloneTab = document.getElementById('table2');
//alert(cloneTab.firstChild.firstChild.innerHTML);
//alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);
table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
var v= table1.firstChild.childNodes;
var len = v.length;
for(var i=1;i<len;i++){
v[i].childNodes[0].firstChild.id=i;// id
}
}
// table
function delTableRow(){
var table1 = document.getElementById('table1');
var isChecked = document.getElementsByName('isChecked');
var len = isChecked.length;
for(var i=len-1;i>=0;i--){
if(isChecked[i].checked==true){
table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//alert(isChecked[i].id);
//alert(isChecked[i].parentNode.parentNode.innerHTML);
}
}
}
</script>
《
<!-- table-->
<table border="0" cellpadding="0" cellspacing="0" class="datalist" id="table1">
<tr>
<th width="38" nowrap="nowrap" style="width: 5%">0</th>
<th width="38" nowrap="nowrap" >00</th>
<th width="79" nowrap="nowrap" scope="col">1</th>
<th width="70" nowrap="nowrap" scope="col">2</th>
<th width="69" nowrap="nowrap" scope="col">3</th>
<th width="66" nowrap="nowrap" scope="col">4</th>
<th width="94" nowrap="nowrap" scope="col">5</th>
<th width="107" nowrap="nowrap" scope="col">6</th>
</tr>
</table>
<!-- table -->
<table>
<tr align="center">
<td colspan="10">
<input type="button" value=" " onclick= "addTableRow();"/>
<input type="button" value=" " onclick="delTableRow();"/>
</td>
</tr>
</table>
<!-- table clone table style = "display:none"-->
<table id='table2' style="display: none">
<tr>
<th><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th>
<th width="38" nowrap="nowrap" style="width: 5%"><input type="text" size="16" maxlength="50" value=""/></th>
<th width="79" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
<th width="70" nowrap="nowrap" scope="col"><input type="text" size="6" maxlength="10" value=""/></th>
<th width="69" nowrap="nowrap" scope="col">
<select size="1">
<option value=""> ...</option>
<option value="1">1</option>
<option value="2">1</option>
</select>
</th>
<td width="100" nowrap="nowrap" scope="col"><input type="text" class="date150"/></td>
<th width="94" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
<th width="71" nowrap="nowrap" scope="col"><input type="text" size="16" maxlength="50" value=""/></th>
</tr>
</table>