使用javascript在html中动态添加/删除行
Adding/Removing row dynamically in html using javascript
我有这个特殊的片段..
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
case "number":
newcell.childNodes[0].value = '';
break;
}
上面的开关使新添加的行从复制的行重置值。
文本和数字重置。
但是下拉框和复选框没有
这两个需要什么命令来重置它们的值?对于下拉菜单，第一个选项和复选框是不选中任何框
编辑:这是整个代码
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
case "number":
newcell.childNodes[0].value = '';
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[colCount-1].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
<body>
<label><input type="checkbox" id='checkboxId'>N/A</label>
<br>
<div id="div-table-id">
<table id='table-id' border="1">
<tr>
<th>Subject</th>
<th>Section Code</th>
<th>Room</th>
<th>Days</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hours Per Week</th>
<th>No of Students (A)</th>
<th>Course Credit w/o multiplier(B)</th>
<th>Student Credit Units (AxB)</th>
<th>Teaching Load Credits with Multiplier</th>
<th>Delete?</th>
</tr>
<tr>
<td>
<select name="subject" >
<option value="cmsc2">CMSC2</option>
<option value="cmsc11" selected="selected">CMSC11</option>
<option value="cmsc121">CMSC121</option>
</select>
</td>
<td><input type="text" id="password" value="sample"/></td>
<td><input type="text" id="password2" value="sample"/></td>
<td>
<input type="checkbox" name="days" value="m" checked>M
<input type="checkbox" name="days" value="t">T
<input type="checkbox" name="days" value="m">W
<input type="checkbox" name="days" value="th">Th
<input type="checkbox" name="days" value="f">F
<input type="checkbox" name="days" value="s">S
</td>
<td><input type="time" name="start_time"></td>
<td><input type="time" name="end_time"></td>
<td><input type="number" name="hpw"></td>
<td><input type="number" name="nos"></td>
<td><input type="number" name="ccm"></td>
<td><input type="number" name="scu"></td>
<td><input type="number" name="tlcm"></td>
<td><input type="checkbox" name="chk"></td>
</tr>
</table>
<input type="button" value="Add Row" onclick="addRow('table-id')" />
<input type="button" value="Delete Row" onclick="deleteRow('table-id')"/>
<input type="button" value="Save"/>
</div>
<script>
document.getElementById('checkboxId').onchange = function () {
var elems = document.getElementById('div-table-id').querySelectorAll('input,select,textarea');
if (document.getElementById('checkboxId').checked) {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
} else {
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
}
}
document.getElementById('password2').disabled = true;
document.getElementById('password').onblur = function(){
if(document.getElementById('password').value != '')
document.getElementById('password2').disabled = false;
else{
document.getElementById('password2').value = '';
document.getElementById('password2').disabled = true;
}
document.getElementById("password2").select();
}
document.getElementById('password2').onblur = function (){
if(document.getElementById('password').value == '')
return;
check();
}
function check() {
if (document.getElementById('password2').value != document.getElementById('password').value) {
alert('The two passwords must match.');
document.getElementById("password").select();
document.getElementById('password2').value = '';
}
else
alert('The two passwords matched.');
}
</script>
好了，我知道你的问题是什么了。当您将新表格单元格的内容指定为第一行内容时，如下
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
在输入/选择元素周围复制一些空白，有时这些空白会成为文本节点。因此，在第一个TD中的SELECT元素的情况下，DOM实际上看起来像这样:
- [0] #Text node
- [1]选择
- [2] #Text node
这意味着当您抓取第一个子newcell.childNodes[0]时，您抓取Text节点，SELECT或CHECKBOX保持不变。我重写了你的代码，包括一个函数，将重置一个新单元格的所有子，因为这也涵盖的情况下，有人检查了更多的复选框在第一行，你用来追加一个新的行。
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for( var i=0; i < colCount; i++ ){
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
resetChildren( newcell );
}
}
function resetChildren( parentEl ){
var len = parentEl.childNodes.length,
i = 0,
el;
for(i = 0; i < len; i++){
el = parentEl.childNodes[i];
console.log( i, el.type, el );
switch( el.type ){
case "text":
el.value = "";
break;
case "checkbox":
el.removeAttribute('checked');
break;
case "select-one":
el.selectedIndex = 0;
break;
case "number":
el.value = '';
break;
}
}
}
相关文章：
- 根据Select值添加/删除表行
- 单击删除其中一个添加的行
- 向具有唯一Id的表添加/删除行
- 添加 jQuery UI 后，从表中删除行的函数不起作用
- 如何在使用Angular.js打开新行后添加删除按钮
- 在 html 表中动态添加/删除行
- JQuery 数据表添加新行，如果该行已经存在，请将其删除并为该 ID 插入新行
- 在数据表表和普通 DOM 表之间移动(添加/删除）tr 行
- 如何在 Firefox 插件 XUL 树中添加和删除行
- 单击时添加几行，双击删除添加的行
- 如何在不影响 Jquery 数据表中其他行的情况下删除选定的现有数据并添加新行
- 通过用户仅使用 javascript 从文本框输入从 html 表中添加和删除行
- 如何使用 jQuery 添加带有行的删除和添加按钮
- AJAX:向表添加新行或使用 AJAX 删除
- 使用带有javascript的复选框添加/删除多行
- 动态添加/删除行和列
- 使用jquery从html表中删除动态添加的行时出现问题
- 从表单中添加/删除行.重置整个表单
- 使用javascript在html中动态添加/删除行
- 如何改变行号时，添加删除行
