<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< script type="text/javascript">
function add() {
var tbody = document.getElementById("tbody");
var rowNo = tbody.rows.length;
tbody.insertRow(rowNo);
tbody.rows[rowNo].insertCell(0);
tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTML
tbody.rows[rowNo].insertCell(1);
tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>";
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>";
tbody.rows[rowNo].insertCell(3);
tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des"+ (rowNo + 1) + "'></input>";
tbody.rows[rowNo].insertCell(4);
tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除' οnclick='deleteRow(event)'/><a href='javascript:void(0)' οnclick='moveUp(this)'>上移</a><a href='javascript:void(0)' οnclick='moveDown(this)'>下移</a>";
tbody.rows[rowNo].onclick = changeActiveRow;
function deleteRow(eve) {
if (confirm("确认删除")) {
element = window.event ? window.event.srcElement : eve.target;
var rowNo = element.parentNode.parentNode.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo - 1);
} //设置选中行的背景色
var currentActiveRow;
function changeActiveRow() {
eve = arguments[0];
element = window.event ? window.event.srcElement : eve.target;
obj = element.parentNode;
while (obj && obj.tagName != "TR") {
obj = obj.parentNode;
if (currentActiveRow)
currentActiveRow.style.backgroundColor = "";
currentActiveRow = obj;
currentActiveRow.style.backgroundColor = "Red";
function cleanWhitespace(element) {
//遍历element的子节点
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i]
if (node.nodeType == 3 && !/\s/.test(node.nodue))
node.parentNode.removeChild(node);
} //使表格行上移，接收参数为链接对象
function moveUp(_a) {
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;
//如果不是第一行 交换顺序
if (_row.previousSibling)
swapNode(_row, _row.previousSibling);
function moveDown(_a) {
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;
//如果不是最后一行 则与下一行交换顺序
if (_row.nextSibling)
swapNode(_row, _row.nextSibling);
function swapNode(node1, node2) {
var _parent = node1.parentNode;
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//将node2插入到原来node1的位置
if (_t1)
_parent.insertBefore(node2, _t1);
else
_parent.appendChild(node2);
//将node1插入到原来ndoe2的位置
if (_t2)
_parent.insertBefore(node1, _t2);
else
_parent.appendChild(node1);
///以下方式仅支持IE
//上移
function moveUpIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
x = Elm.rowIndex;
myTable = Elm.parentElement;
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x - 1);
} //下移
function moveDownIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
x = Elm.rowIndex;
myTable = Elm.parentElement;
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x + 1);
} //移动行，参数：要操作的table，要相互移动的行a，b
function moveCell(myTable, a, b) {
var el = myTable.all.tags("input")
var arr = [];
//遍历所有input控件
for (i = 0; i < el.length; i++) {
if (el[i].type == "checkbox")
//对所有checkbox控件添加到数组中
arr.push(el[i], el[i].checked);
} myTable.moveRow(a, b);
//对数组中所有元素获得对象并对引用的对象赋原值
while (arr.length > 0)
arr.shift().checked = arr.shift();
< /script>
< /head>
< body>
< table border="1" id="tableSpan">
< thead id="thead">
< tr οnclick="changeActiveRow(this);">
< td>序号</td>
< td>缺省</td>
< td>启用</td>
< td>选项内容</td>
< td>操作</td>
< /tr>
< /thead>
< tbody id="tbody">
< /tbody>
< /table>
< button οnclick="add()" value="添加">添加</button>
< button οnclick="moveUp()" value="添加">_↑_</button>
< button οnclick="moveDown()" value="添加">_↓_</button>
< /body>
< /html>
< html>
< head>
< script type="text/javascript">
function add() {
var tbody = document.getElementById("tbody");
var rowNo = tbody.rows.length;
tbody.insertRow(rowNo);
tbody.rows[rowNo].insertCell(0);
tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTML
tbody.rows[rowNo].insertCell(1);
tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>";
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>";
tbody.rows[rowNo].insertCell(3);
tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des"+ (rowNo + 1) + "'></input>";
tbody.rows[rowNo].insertCell(4);
tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除' οnclick='deleteRow(event)'/><a href='javascript:void(0)' οnclick='moveUp(this)'>上移</a><a href='javascript:void(0)' οnclick='moveDown(this)'>下移</a>";
tbody.rows[rowNo].onclick = changeActiveRow;
function deleteRow(eve) {
if (confirm("确认删除")) {
element = window.event ? window.event.srcElement : eve.target;
var rowNo = element.parentNode.parentNode.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo - 1);
} //设置选中行的背景色
var currentActiveRow;
function changeActiveRow() {
eve = arguments[0];
element = window.event ? window.event.srcElement : eve.target;
obj = element.parentNode;
while (obj && obj.tagName != "TR") {
obj = obj.parentNode;
if (currentActiveRow)
currentActiveRow.style.backgroundColor = "";
currentActiveRow = obj;
currentActiveRow.style.backgroundColor = "Red";
function cleanWhitespace(element) {
//遍历element的子节点
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i]
if (node.nodeType == 3 && !/\s/.test(node.nodue))
node.parentNode.removeChild(node);
} //使表格行上移，接收参数为链接对象
function moveUp(_a) {
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;
//如果不是第一行 交换顺序
if (_row.previousSibling)
swapNode(_row, _row.previousSibling);
function moveDown(_a) {
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;
//如果不是最后一行 则与下一行交换顺序
if (_row.nextSibling)
swapNode(_row, _row.nextSibling);
function swapNode(node1, node2) {
var _parent = node1.parentNode;
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//将node2插入到原来node1的位置
if (_t1)
_parent.insertBefore(node2, _t1);
else
_parent.appendChild(node2);
//将node1插入到原来ndoe2的位置
if (_t2)
_parent.insertBefore(node1, _t2);
else
_parent.appendChild(node1);
///以下方式仅支持IE
//上移
function moveUpIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
x = Elm.rowIndex;
myTable = Elm.parentElement;
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x - 1);
} //下移
function moveDownIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
x = Elm.rowIndex;
myTable = Elm.parentElement;
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x + 1);
} //移动行，参数：要操作的table，要相互移动的行a，b
function moveCell(myTable, a, b) {
var el = myTable.all.tags("input")
var arr = [];
//遍历所有input控件
for (i = 0; i < el.length; i++) {
if (el[i].type == "checkbox")
//对所有checkbox控件添加到数组中
arr.push(el[i], el[i].checked);
} myTable.moveRow(a, b);
//对数组中所有元素获得对象并对引用的对象赋原值
while (arr.length > 0)
arr.shift().checked = arr.shift();
< /script>
< /head>
< body>
< table border="1" id="tableSpan">
< thead id="thead">
< tr οnclick="changeActiveRow(this);">
< td>序号</td>
< td>缺省</td>
< td>启用</td>
< td>选项内容</td>
< td>操作</td>
< /tr>
< /thead>
< tbody id="tbody">
< /tbody>
< /table>
< button οnclick="add()" value="添加">添加</button>
< button οnclick="moveUp()" value="添加">_↑_</button>
< button οnclick="moveDown()" value="添加">_↓_</button>
< /body>
< /html>
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
