今天不忙,总结点东东供大家参考:
/**
* @param 无边框,隔行换色
* @see 调用方法:在title中引入js文件,在表格后执行函数
* @paraneter rowStart & colStart默认值为0
*/
function changeColorEachRow(tableID, rowStart, colStart){
var tabTable = document.getElementById(tableID);
if(tabTable.rows.length < rowStart){
return false;
}
for(var i = rowStart; i < tabTable.rows.length; i ++){
var row = tabTable.rows[i];
var rowLength = row.cells.length;
if(rowLength < colStart){
return false;
}
if(i == parseInt(i / 2) * 2){
for(var j = colStart; j < rowLength; j++){
row.cells[j].style.backgroundColor = "#FFFFFF";
}
}else {
for(var j = colStart; j < rowLength; j++){
row.cells[j].style.backgroundColor = "#F9F9FA";
}
}
}
}
/**
* @param 鼠标的over、out、click的动作时显示不同的颜色
* @see 调用方法:在tr里加入:
* οnmοuseοver="colorMouseOver("test", this.rowIndex)"
* οnmοuseοut="resetAllRowsColor("test")"
* οnmοusedοwn="colorMouseDown("test",this.rowIndex)"
* @paraneter tarTable:tableID
*/
var finalRow = 1024;
function colorMouseDown(tarTable, rowID){
finalRow = rowID;
var tab = document.getElementById(tarTable);
resetAllRowsColor(tarTable);
var row = tab.rows[rowID];
for(var i = 0; i < row.cells.length; i ++){
row.cells[i].style.backgroundColor = "#7CC5E5";
}
}
function colorMouseOver(tarTable, rowID){
var tab = document.getElementById(tarTable);
resetAllRowsColor(tarTable);
if(finalRow == rowID){
}else{
var row = tab.rows[rowID];
for(var i = 0; i < row.cells.length; i ++){
row.cells[i].style.backgroundColor = "#F5F5F5";
}
}
}
function resetAllRowsColor(tarTable){
var tab = document.getElementById(tarTable);
for(var i = 0; i < tab.rows.length; i ++){
if(finalRow == i){
}else{
var row = tab.rows[i];
var len = row.cells.length;
if(i == parseInt(i / 2) * 2){
for(var j = 0; j < len; j++){
row.cells[j].style.backgroundColor = "#FFFFFF";
}
}else {
for(var j = 0; j < len; j++){
row.cells[j].style.backgroundColor = "#F9F9F9";
}
}
}
}
}
/**
* @param 带边框,隔行换色
* @see 调用方法:在表格后面执行函数
* @paraneter #EDEDED为表格边框颜色
*/
function setBorderColor(tableID) {
var tab = document.getElementById(tableID);
tab.border = "0";
tab.cellpadding = "0";
tab.cellspacing = "1";
tab.style.background = "#EDEDED";
for(var i = 0; i < tab.rows.length; i ++){
if(finalRow == i){
}else{
var row = tab.rows[i];
var len = row.cells.length;
if(i == parseInt(i / 2) * 2){
for(var j = 0; j < len; j++){
row.cells[j].style.backgroundColor = "#FFFFFF";
}
}else {
for(var j = 0; j < len; j++){
row.cells[j].style.backgroundColor = "#F9F9F9";
}
}
}
}
}
/**
* @param 增加删除行,并求和
* @see 调用方法:需要修改插入的表格代码
* @paraneter tableID为表格ID或tbody的ID
*/
function createRow(tableID) {
var tarTable = document.getElementById(tableID);
var rowNum = tarTable.rows.length;
var tr = new Array();
var tr = tarTable.insertRow(tarTable.rows.length);
var td;
td = tr.insertCell(0);
td.innerHTML = '<input id="t' + rowNum + '1" name="t1" type="text" value="0.00" οnchange="calculateSum(\'' + tableID + '\', \'t' + rowNum + '1\', \'t' + rowNum + '2\', \'t' + rowNum + '3\')"/>';
td = tr.insertCell(1);
td.innerHTML = '<input id="t' + rowNum + '2" name="t2" type="text" value="0" οnchange="calculateSum(\'' + tableID + '\', \'t' + rowNum + '1\', \'t' + rowNum + '2\', \'t' + rowNum + '3\')"/>';
td = tr.insertCell(2);
td.innerHTML = '<input id="t' + rowNum + '3" name="t3" type="text" value="0.00" disabled="disabled" />';
}
function deleterow(tableID) {
var mtable = document.getElementById(tableID);
if (mtable.rows.length > 1)
mtable.deleteRow(mtable.rows.length - 1);
}
function calculateSum(tableID, _price, _count, _lall){
var mtable = document.getElementById(tableID);
var price = document.getElementById(_price);
var count = document.getElementById(_count);
var lall = document.getElementById(_lall);
lall.value = price.value * count.value;
var sum = parseInt(0);
for(var i = 1; i < mtable.rows.length; i ++) {
sum = sum + parseFloat(document.getElementById("t" + i + "3").value);
}
document.getElementById("sumPrice").value = sum;
}
/**
* @param 隐藏、显示指定行
* @see
* @paraneter tableID
*/
function showIndexRow(tableID){
var tab = document.getElementById(tableID);
tab.rows[2].style.display = "block";
}
function hiddenIndexRow(tableID){
var tab = document.getElementById(tableID);
tab.rows[2].style.display = "none";
}