<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js操纵表格</title>
<style>
#contaner{
margin:0px auto;
border:#666 medium solid;
width:900px;
height:600px;
}
#data_table {
}
</style>
</head>
<body>
<div id="contaner">
<table id="data_table" width="600px" align="center" style=" text-align:center" cellpadding="0" cellspacing="0" border="1px">
<tr style="background-color:#999">
<td>卡号</td>
<td>币种</td>
<td>积分</td>
<td>合计</td>
</tr>
</table>
<br>
<input type="button" value="合并单元格" onClick="uniteTable()">
</div>
<script type="text/javascript">
var data_list = new Array();
var data_array1 =["1234","人民币","23",""];
var data_array2 =["9876","人民币","19",""];
var data_array3 =["9876","美元","44",""];
var data_array4 =["5632","人民币","-88",""];
var data_array5 =["5632","美元","27",""];
var data_array6 =["2345","人民币","11",""];
var data_array7 =["6567","人民币","38",""];
var data_array8 =["6567","美元","99",""];
var data_array9 =["9085","人民币","8",""];
data_list.push(data_array1);
data_list.push(data_array2);
data_list.push(data_array3);
data_list.push(data_array4);
data_list.push(data_array5);
data_list.push(data_array6);
data_list.push(data_array7);
data_list.push(data_array8);
data_list.push(data_array9);
showdata();
function showdata(){
var tableNode = document.getElementById("data_table");
for(i = 1;i<=data_list.length;i++){
var row = tableNode.insertRow(i);
var data_array = data_list[i-1];
for(j = 0;j<data_array.length;j++){
var cell = row.insertCell(j);
cell.innerHTML = data_array[j];
}
}
}
function uniteTable(){
var tb = document.getElementById("data_table");
if(!checkTable()){
return;
}
//var i=0;
//var j=0;
var rowCount=tb.rows.length; //
var colCount=tb.rows[0].cells.length; //
var cardNO1=null;
var cardNo2=null;
for(i=1;i<rowCount;i++){
for(j=0;j<colCount;j++){
tb.rows[i].cells[j].id="tb_" + i.toString() + "_" + j.toString();
}
}
for(i=1;i<rowCount;i++){
cardNo1=document.getElementById("tb_" + i.toString() + "_0");
if(i % 2 == 0){
//tb.rows[i].setAttribute("style","background-color:#999");
}
var pointsNode1 = document.getElementById("tb_" + i.toString() + "_2");
var points1 = pointsNode1.innerHTML;
var pointsNum1 = 0;
if("0" == checkStrIsNum(points1)){
pointsNum1 = parseInt(points1);
}
if("1" == checkStrIsNum(points1)){
pointsNum1 = 0 - parseInt(points1.substring(1,points1.length));
}
var pointsTotalNode1 = document.getElementById("tb_" + i.toString() + "_3");
pointsTotalNode1.innerHTML = pointsNum1;
if((i+1) < rowCount){
cardNo2=document.getElementById("tb_" + (i+1).toString() + "_0");
if(cardNo1.innerHTML == cardNo2.innerHTML){
//tb.rows[i+1].setAttribute("style","background-color:#999");
cardNo1.rowSpan++;
cardNo2.parentNode.removeChild(cardNo2);
var pointsNode2 = document.getElementById("tb_" + (i+1).toString() + "_2");
var points2 = pointsNode2.innerHTML;
var pointsNum2 = 0;
if("0" == checkStrIsNum(points2)){
pointsNum2 = parseInt(points2);
}
if("1" == checkStrIsNum(points2)){
pointsNum2 = 0 - parseInt(points2.substring(1,points2.length));
}
var pointsTotal = pointsNum1 + pointsNum2;
var pointsTotalNode2 = document.getElementById("tb_" + (i+1).toString() +"_3");
pointsTotalNode1.innerHTML = pointsTotal;
pointsTotalNode1.rowSpan++;
pointsTotalNode2.parentNode.removeChild(pointsTotalNode2);
i++;
}
}
}
}
function checkTable(){
var tb = document.getElementById("data_table");
if(tb.rows.length==1){
return false;
}
if(tb.rows[0].cells.length==0){
return false;
}
for(i=0;i<tb.rows.length;i++){
if(tb.rows[0].cells.length != tb.rows[i].cells.length){
return false;
}
}
return true;
}
function checkStrIsNum(points){
var rex1 = /^\d+$/;
var rex2 = /^-\d+$/;
if(rex1.test(points)){
return "0";
}
if(rex2.test(points)){
return "1";
}
}
</script>
</body>
</html>
|
|
转播
