JavaScript对报表进行添加删除修改
日期：2014-05-16 浏览次数：20314 次
JavaScript对表格进行添加删除修改
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#testDiv{
border:2px solid #000000;
width:500px;
height:95px;
overflow-x:hidden;
overflow-y:scroll;
}
input{
width:50px;
}
#testTable {
width:96.6%;
border-collapse: collapse;
border-right: 2px solid #000000;
table-layout: fixed;
empty-cells:show;
}
#testTable td{
border-style:dotted;
border-width:0 0 1px 0;
border-color:#000000;
height:25px;
padding:0;
}
</style>
<script type="text/javascript">
// window onload
window.onload=function(){
var testTable= document.getElementById("testTable")
changeTableWidth(testTable);
addBorderCss(testTable);
addEvent(testTable);
}
// add mouseover mouseout click event
var selected_index=-1;
function addEvent(table){
for(var i=0;i<table.rows.length;i++){
table.rows[i].onmouseover=function(){
this.style.backgroundColor="#E8F2FE";
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="#C6D6FD";
}
};
table.rows[i].onmouseout=function(){
this.style.backgroundColor="";
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="#C6D6FD";
}
};
table.rows[i].onclick=function(){
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="";
}
this.style.backgroundColor="#C6D6FD";
selected_index=this.rowIndex;
}
}
}
//add tr
function addTrTd(table) {
table.insertRow(-1);
var rows = table.rows.length;
var cols = table.rows[0].cells.length;
for ( var i = 0; i < cols; i++) {
table.rows[rows - 1].insertCell(-1);
table.rows[rows - 1].cells[i].innerHTML=" ";
}
addBorderCss(table);
addEvent(table);
}
// add tr to table
function addTable(table){
var rows=table.rows.length;
var cols=table.rows[0].cells.length;
table.insertRow(-1);
for(var i=0;i<cols;i++){
table.rows[rows].insertCell(-1);
table.rows[rows].cells[i].innerHTML="test";
table.rows[rows-1].cells[i].style.borderBottom="1px dotted #000000";
}
addBorderCss(table);
addEvent(table);
}
// delete last tr of table
function deleteTable(table){
if(table.scrollHeight<115){
return;
}
table.deleteRow(table.rows.length-1);
addBorderCss(table);
addEvent(table);
}
// reset table
function resetTable(table){
var length=table.rows.length;
for(var i=0;i<length;i++){
for(var j=0;j<table.rows[i].cells.length;j++){
table.rows[i].cells[j].innerHTML=" ";
}
}
}
// change table width for different browser
function changeTableWidth(table){
if(navigator.userAgent.indexOf("Firefox")!=-1){
table.style.width="99.8%";
}else{
table.style.width="96.6%";
}
}
// change border css
function addBorderCss(table){
var rows=table.rows.length;
var cols=table.rows[0].cells.length;
for(var i=0;i<rows;i++){
for(var j=0;j<cols;j++){
table.rows[i].cells[j].style.borderStyle="dotted";
table.rows[i].cells[j].style.borderColor="#000000";
table.rows[i].cells[j].style.borderWidth="0 0 1px 0";
table.rows[0].cells[j].style.borderTop="none";
table.rows[rows-1].cells[j].style.borderBottom="none";
}
table.rows[i].cells[0].style.borderLeft="none";
}
}
// add table
function addt(){
addTrTd(document.getElementById("testTable"));
// addTable(document.getElementById("testTable"));
}
// delete table
function deletet(){
deleteTable(document.getElementById("testTable"));
}
// reset table
function resett(){
resetTable(document.getElementById("testTable"));
}
</script>
<title>JavaScript对表格进行添加删除修改</title>
</head>
<body>
<input type="button" value="add" onclick="addt()">
<input type="button" value="delete" onclick="deletet()">
<input type="button" value="reset" onclick="resett()">
<div id="testDiv">
<table i
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
