动态增加 删除table行 列等
<!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=gb2312" />
<title>无标题文档</title>
<script language="javascript">
//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象
//talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作
function insertRow(targetTable,sourceTable)
{
var oTBODY = document.getElementById(targetTable).tBodies.item(0);
var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);
var rowsCount = oTBODYData.rows.length;
for(var i=0;i<rowsCount;i++){
oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
}
}
function deleteRow(Field,targetTable){
var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的
document.getElementById(targetTable).deleteRow(findex);
}
// 查询出将要删除的行所在的位置index
function getElementOrder(field){
var i = 0;
var order = 0;
var elements = document.getElementsByName(field.name);
for(i=0;i<elements.length;i++){
order++;
if(elements[i]==field){
break;
}
}
return order;
}
</script>
</head>
<body>
<table id = "sourceTable" style="display:none;">
<tr>
<td><input type="text" name="username"></td>
<td><input type="password" name ="password"></td>
<td><input type = "text" name= "age"></td>
<td><input type="button" name = "deleteButton" value="删除" onclick="deleteRow(this,'targetTable')"></td>
</tr>
</table>
<table id="targetTable">
<tr>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td> </td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="right"><input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');"></td>
</tr>
</tfoot>
</table>
</body>
</html>
///////////////////////////////////////
//////////////////////////////////////
<TABLE width="500" border="1" id="t" onKeyUp="sum(this)" onClick="setPos(this)">
<TR>
<TD><div contentEditable>项目\部门</div></TD>
<TD><div contentEditable>部门1</div></TD>
<TD><div contentEditable>部门2</div></TD>
<TD><div contentEditable>部门3</div></TD>
<TD><div contentEditable>统计</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物1</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物2</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物3</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物4</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物5</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>总计</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
</TR>
</TABLE>
<input type="button" value="加一行" onClick="insertRow(document.all.t)">
<input type="button" value="加一列" onClick="insertCell(document.all.t)">
<input name="button" type="button" onClick="deleteRow(document.all.t)" value="删除行">
<input type="button" value="删除列" onClick="deleteCell(document.all.t)">
<input type="button" value="正序排列" onClick="ascRow(document.all.t)">
<input type="button" value="反序排列" onClick="descRow(document.all.t)">
<br>
<input type="button" value="横向正序排列" onClick="ascCell(document.all.t)">
<input type="button" value="横向反序排列" onClick="descCell(document.all.t)">
<input type="button" value="全部数据统计" onClick="getSum(document.all.t,'total')">
<input type="text" value="0" name="total" style="width:50">
<SCRIPT LANGUAGE="JavaScript">
<!--
var currRow="0";
var currCell="0";
function getSum(obj,objName){
var sum=0;
for(var i=1;i<obj.rows.length-1;i++){
for(var j=1;j<obj.rows[i].cells.length;j++){
sum+=parseInt(obj.rows[i].cells[j].innerText);
}
}
document.getElementsByName(objName)[0].value=sum;
}
//正序排列*************************************
function ascCell(obj){
if(currCell>=1&&currRow>=1){
var len=obj.rows[0].cells.length;
for(var j=0;j<len;j++){
var order=0;
for(var i=1;i<len-2;i++){
if(parseInt(obj.rows[currRow].cells[i].innerText)>parseInt(obj.rows[currRow].cells[i+1].innerText)){
for(var k=0;k<obj.rows.length;k++){
var tmp=obj.rows[k].cells[i].innerHTML;
obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
obj.rows[k].cells[i+1].innerHTML=tmp;
}
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}
//反序排列*************************************
function descCell(obj){
if(currCell>=1&&currRow>=1){
var len=obj.rows[0].cells.length;
for(var j=0;j<len;j++){
var order=0;
for(var i=1;i<len-2;i++){
if(parseInt(obj.rows[currRow].cells[i].innerText)<parseInt(obj.rows[currRow].cells[i+1].innerText)){
for(var k=0;k<obj.rows.length;k++){
var tmp=obj.rows[k].cells[i].innerHTML;
obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
obj.rows[k].cells[i+1].innerHTML=tmp;
}
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}
//正序排行*************************************
function ascRow(obj){
if(currCell>=1){
var rows=obj.rows;
var len=rows.length-2;
for(var j=0;j<=rows.length-2;j++){
var order=0;
for(var i=1;i<len;i++){
if(parseInt(rows[i].cells[currCell].innerText)>parseInt(rows[i+1].cells[currCell].innerText)){
obj.moveRow(i,i+1);
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}
//反序排行*************************************
function descRow(obj){
if(currCell>=1){
var rows=obj.rows;
var len=rows.length-2;
for(var j=0;j<rows.length-2;j++){
var order=0;
for(var i=1;i<len;i++){
if(parseInt(rows[i].cells[currCell].innerText)<parseInt(rows[i+1].cells[currCell].innerText)){
obj.moveRow(i,i+1);
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}
//删除行*************************************
function deleteRow(obj){
var rows=obj.rows.length;
if(currRow>=1&&currRow<rows-1){
obj.deleteRow(currRow);
}
clear();
averCol(obj);
}
//删除列*************************************
function deleteCell(obj){
if(currCell>=1&&currCell<obj.rows[0].cells.length-1){
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].deleteCell(currCell);
}
}
clear();
averCol(obj);
}
function averCol(obj){
var wh=obj.width;
var cells=obj.rows[0].cells;
for(var i=0;i<cells.length;i++){
cells[i].width=Math.ceil(wh/cells.length);
}
}
//插入一列
function insertCell(obj){
if(currCell&&currCell!=obj.rows[0].cells.length-1){
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].insertCell(currCell+1);
obj.rows[i].cells[currCell+1].innerHTML="<div contentEditable>0</div>";
}
clear();
averCol(obj);
chnBgcolor(obj,currRow,"ffffff");
}
}
function check(obj){
var k=parseInt(obj.innerText);
if(isNaN(k)){
obj.childNodes[0].innerText=0;
return 0;
}
else{
obj.childNodes[0].innerText=k;
return k;
}
}
function sum(obj){
var o=event.srcElement;
var total=0;
var tindex=obj.rows.length-1;
if(o.parentElement.tagName=="TD"&&o.parentElement.cellIndex>=1&&o.parentElement.parentElement.rowIndex>=1){
var index=o.parentElement.cellIndex;
var pindex=o.parentElement.parentElement.rowIndex;
for(var i=1;i<tindex;i++){
var num=check(obj.rows[i].cells[index]);
total=parseInt(total)+num;
}
var total1=0;
for(i=1;i<obj.rows[pindex].cells.length-1;i++){
total1+=check(obj.rows[pindex].cells[i]);
}
obj.rows[pindex].cells(obj.rows[pindex].cells.length-1).innerText=total1;
obj.rows[tindex].cells[index].innerText=total;
obj.rows[tindex].cells(obj.rows[0].cells.length-1).innerText=addAll(obj);
}
setPos(obj);
}
function chnBgcolor(obj,index,color){
for(var i=0;i<obj.rows.length;i++){
if(i==index){
obj.rows[i].bgColor=color;
}
else{
obj.rows[i].bgColor="ffffff";
}
}
}
function setPos(obj){
var o=event.srcElement;
if(o.tagName=="DIV"){
currRow=o.parentElement.parentElement.rowIndex;
currCell=o.parentElement.cellIndex;
chnBgcolor(obj,currRow,"dedede");
}
else if(o.tagName=="TD"){
currRow=o.parentElement.rowIndex;
currCell=o.cellIndex;
}
else{
currRow=obj.rows.length-1;
currCeil=obj.rows[0].cells.length-1;
}
}
function clear(){
currRow=0;
currCell=0;
}
function addAll(obj){
var total=0;
for(var i=1;i<obj.rows[0].cells.length-1;i++){
total+=parseInt(obj.rows[obj.rows.length-1].cells[i].innerText);
}
return total;
}
//-->
</SCRIPT>
