本文介绍了一个简单的表格操作示例，包括添加、删除、修改单元格内容及改变单元格背景颜色等功能。通过JavaScript实现这些功能，使得用户可以动态地对表格进行操作。
function Style() {
var Style = document.getElementById('Style');
Style.disabled = true;
var tr = document.getElementById('cell');
if (tr.rows[0] != null) {
var td = tr.rows[0].cells[0];
td.style.backgroundColor = "#ffdddd";
}
}
function modify() {
var modify = document.getElementById('modify');
modify.disabled = true;
var tr = document.getElementById('cell');
if (tr.rows[0] != null) {
tr.rows[0].cells[0].innerHTML = '冰箱';
}
}
function del() {
var add = document.getElementById('add');
var del = document.getElementById('del');
var modify = document.getElementById('modify');
var Style = document.getElementById('Style');
add.disabled = false;
del.disabled = true;
modify.disabled = true;
Style.disabled = true;
var tr = document.getElementById('cell');
for (i = tr.rows.length - 1; i >= 0; i--) {
tr.deleteRow(i);
}
}
function add() {
var add = document.getElementById('add');
var del = document.getElementById('del');
var modify = document.getElementById('modify');
var Style = document.getElementById('Style');
add.disabled = true
del.disabled = false;
modify.disabled = false;
Style.disabled = false;
var tr = document.getElementById('cell');
tr = tr.insertRow(tr.rows.length);
var td = tr.insertCell(0);
td.innerHTML = '空调';
}
<table id="cell"> <tr> <td> </td> </tr> </table> <input type="button" value="add" onclick="add()" id="add" /> <input type="button" value="del" onclick="del()" id="del" disabled="disabled" /> <input type="button" value="modify" onclick="modify()" id="modify" disabled="disabled" /> <input type="button" value="Style" onclick="Style()" id="Style" disabled="disabled" /> <script type="text/javascript" src="table.js"> </script>
扫一扫
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
