动态表格的创建,增删改查功能。代码完整整洁易懂。
var oldClassName = "oddColor";//tr的class属性
//突出鼠标所在行
onload = function () {
var rows = document.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
rows[i].onmouseover = function () { this.className = "overColor"; }
rows[i].onmouseout = function () { this.className = oldClassName; } }
}
//点击添加按钮时,显示添加信息表单,并隐藏添加按钮
function show() {
document.getElementById("edit").style.display = "";
document.getElementById("select").style.display = "none";
}
//获取性别
function getSex() {
var value = "";
var radio = document.getElementsByName("Sex");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked == true) {
value = radio[i].value;
break;
}
}
return value;
}
//用于把信息添加到表格中,同时隐藏添加信息表单,重新显示添加按钮
function s() {
add();
document.getElementById("edit").style.display = "none";
document.getElementById("select").style.display = "";
}
//具体用于添加表格的一行
function add() {
var rows = main_table.insertRow(main_table.rows.length);
rows.onmouseover = function () {
this.className = "overColor";
}
rows.onmouseout = function () {
this.className = oldClassName;
}
var cells = rows.insertCell(0);
cells.innerHTML = document.getElementById("na").value;
cells = rows.insertCell(1);
cells.innerHTML = document.getElementById("ag").value;
cells = rows.insertCell(2);
cells.innerHTML = getSex();
cells = rows.insertCell(3);
cells.innerHTML = document.getElementById("co").value;
cells = rows.insertCell(4);
cells.innerHTML = document.getElementById("em").value;
cells = rows.insertCell(5);
cells.innerHTML = '删除';
}
//删除行
function deleteRow(obj) {
main_table.deleteRow(obj.parentElement.parentElement.rowIndex);
}
//表格排序,冒泡排序
function BubbleSort(table, nColNum, strDataType, nSortOrder) { //参数依次是表格id 列号排序字段类型(int,string,float)排序方式
var length = table.rows.length;
for (var i = 1; i < length; i++) { //剔除表头
var exchanged = false;
for (var j = length - 1; j > i; j--) {
switch (strDataType) {
case "int":
if (nSortOrder > 0) { //desc
if
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) >
parseInt(table.rows[j - 1].cells[nColNum].childNodes[0].data)) {
Swap(table, j, j - 1);
exchanged = true;
}
}
else {
if
(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) <
parseInt(table.rows[j - 1].cells[nColNum].childNodes[0].data)) {
Swap(table, j, j - 1);
exchanged = true;
}
}
break;
case "float":
if (nSortOrder > 0) { //desc
if
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) >
parseFloat(table.rows[j - 1].cells[nColNum].childNodes[0].data)) {
Swap(table, j, j - 1);
exchanged = true;
}
}
else {
if
(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) <
parseFloat(table.rows[j - 1].cells[nColNum].childNodes[0].data)) {
Swap(table, j, j - 1);
exchanged = true;
}
}
break;
case "string":
default:
if (nSortOrder > 0) { //desc
if
(table.rows[j].cells[nColNum].childNodes[0].data.toString() >
table.rows[j - 1].cells[nColNum].childNodes[0].data.toString()) {
Swap(table, j, j - 1);
exchanged = true;
}
}
else {
if
(table.rows[j].cells[nColNum].childNodes[0].data.toString() <
table.rows[j - 1].cells[nColNum].childNodes[0].data.toString()) {
Swap(table, j, j - 1);
exchanged = true;
}
}
} //switch
} //for j
if (!exchanged) break;
} //for i
}
//交换俩行
function Swap(table, i, j) {
if (i < 0 || j > table.rows.length - 1) return;
if (i < j) {
table.moveRow(i, j);
table.moveRow(j - 1, i);
}
else {
table.moveRow(i, j);
table.moveRow(j + 1, i);
}
}
var sorttype = 1; //desc 默认排序类型
//排序
function sortByCol(nColNum, strDataType) {
var table = document.getElementById("main_table"); //定位到table上
BubbleSort(table, nColNum, strDataType, sorttype);
sorttype = 0 - sorttype; //asc
}
#main_table {
width: 100%;
border-collapse: collapse;
}
#main_table td, #main_table th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
th {
background-color: #A7C942;
color: #ffffff;
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
}
.oddColor {
background-color: #ffffff;
}
.overColor {
background-color: #EAF2D3;
}
#edit {
width: 430px;
margin: 20px auto;
padding: 10px 10px;
background: #EAF2D3;
border: 1px solid #e1e1e1;
}
label {
float: left;
clear: left;
margin: 11px 20px 0 0;
width: 95px;
text-align: right;
font-size: 16px;
color: #445668;
}
li input[type=text] {
margin: 11px 20px 0 0;
}
li {
list-style: none;
}
#btns {
float: right;
clear: right;
}
姓名 | 年龄 | 性别 | 联系方式 | 邮箱地址 | |
---|---|---|---|---|---|
李雨 | 28 | 女 | 189******** | liyu@https://www.doczj.com/doc/a613079222.html, | 删除 |
张华 | 8 | 男 | 12765431098 | zhanghua@https://www.doczj.com/doc/a613079222.html, | 删除 |
卜树 | 38 | 男 | 98765417829 | bushu@https://www.doczj.com/doc/a613079222.html, | 删除 |
李东 | 17 | 女 | 176******** | lidong@https://www.doczj.com/doc/a613079222.html, | 删除 |
王华 | 22 | 女 | 176******** | wanghua@https://www.doczj.com/doc/a613079222.html, | 删除 |