我有一个这样的Javascript:
<script language="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[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
var showMode = 'table-cell';
if (document.all) showMode='block';
function toggleVis(btn){
btn = document.forms['tcol'].elements[btn];
cells = document.getElementsByName('t'+btn.name);
mode = btn.checked ? showMode : 'none';
for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}
</script>
下面是显示/隐藏列和插入新行的HTML:
<body>
<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
</form>
<input type="button" value="Insert Row" onclick="addRow('dataTable')">
<table id="dataTable">
<tr>
<td name="tcol1" id="tcol1"><input type="text" name="txt1"></td>
<td name="tcol2" id="tcol2"><input type="text" name="txt2"></td>
<td name="tcol3" id="tcol3"><input type="text" name="txt3"></td>
</tr>
</table>
我可以插入行,但是只有第一行的列可以被隐藏。是因为输入字段的属性吗?如果是,我如何添加标签属性到新的行?请帮我解决这个问题。谢谢。
newcell.innerHTML = table.rows[0].cells[i].innerHTML
不会复制属性到新单元格,它只会复制table.rows[0].cells[i] cell.
的innerHtml
所以name
属性不会被应用到新细胞toggleVis
函数工作通过name
属性查找细胞。
您可以在addRow
中添加以下代码来将name
属性应用于newcell。
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[0].cells[i].innerHTML;
newcell.setAttribute("name",table.rows[0].cells[i].getAttribute("name"));//use setAttribute to set any attribute of dom element
newcell.style.display = table.rows[0].cells[i].style.display ; // to copy display style
newcell.id = table.rows[0].cells[i].getAttribute("name"); // IE workaround for getting this table cell in getElementsByName , see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
我知道这不能回答您的具体问题,但是您的代码需要很多帮助。你做事的方式很容易出错,可以用一种更简单的方式来完成。这里有一个例子。我使用jQuery是为了节省时间,但如果你不想使用jQuery,可以将这些原理映射到纯javascript中。
- 不要使用内联javascript调用。您可以监视复选框的父容器,并确定更改了哪个。 不要监控复选框的onclick事件。使用onchange代替。这样更安全。
- 你可以使用html5 data属性来存储被点击的复选框。例如:
<input type=checkbox name="col1" checked data-number="1"> 1
. - 使用单击的数据字段来确定要修改表中的哪个单元格。
$('input:checkbox').change( function() {
//which checkbox was changed?
var number = $(this).data('number') - 1;
//get the table cell that matches the clicked number
var targetTD = $('#dataTable td')[number];
//if our checkbox is checked then...
if ($(this).is(':checked')) {
$(targetTD).css('background-color', 'white');
}
else {
$(targetTD).css('background-color', 'yellow');
}
});