动态增加 删除table行 列等

最新推荐文章于 2017-04-26 10:03:00 发布
最新推荐文章于 2017-04-26 10:03:00 发布
阅读量125 收藏
点赞数
分类专栏： JavaScript 文章标签： HTML XHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaoyanzhu/article/details/83841759
版权
<!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="删除" οnclick="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="增加行" οnclick="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>
yaoyanzhu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
insertRow
huangguimei的专栏
11-27 957
http://www.w3.org/1999/xhtml" >    无标题页        function insertrow()    {        var row=tab.insertRow(tab.rows.length-1);   // alert("1");    var i=row.rowIndex;    var cell=row.insertCell(0);    cell
使用insertRow需要注意参数
weixin_30703911的博客
03-07 908
表格对象的insertRow和insertCell方法有一个默认的参数-1，表示在当前行或者单元格后插入行和单元格。在ie中可以不用填写这个参数，但是在firefox浏览器下必须加上这个参数否则就会出现缺少参数的错误。 row = document.getElementById(id).insertRow(-1); cell = row.insertCell(-1); ...
车辆路径问题的matlab算法
05-15
对于经典的车辆路径问题，通过matlab中的智能算法遗传算法进行编码，从而实现问题的解，代码可以使用，已经验证过多次，可自行处理数据
汇总一些JS小点使用方法记录
weixin_30919571的博客
04-26 118
一.相同name获得值 1.获得当前索引： var index = getElementOrder(Field)-1;//Field传入this2.获得当前的值： fm.QuantityMain[index].value//QuantityMain是name;fm是form的name3.获得tbody及其行数：var oTBODY = document.all("ItemKindMain")...
insertrows:在特定位置将行插入矩阵-matlab开发
05-29
INSERTROWS - 在特定位置将行插入矩阵C = INSERTROWS(A,B,IND) 将矩阵 B 的行插入到矩阵 A 的位置 IND 中。 矩阵 B 的第 k 行将插入到矩阵 A 中的位置 IND(k) 之后。如果 A 是 N×X 矩阵，B 是 M×X 矩阵，则 C 将是 (N+M)- by-X 矩阵。 IND可以包含非整数。 如果 B 是 1×N 矩阵，则将为 IND 指定的每个插入位置插入 B。 如果 IND 是单个值，则整个矩阵 B 将插入该位置。 如果 B 是单个值，则将 B 扩展为行向量。 在所有其他情况下，IND中的元素数应等于B中的行数，并且矩阵A和B的列数，平面数等应相同。 IND 的值小于 1 将导致相应的行插入到 A 之前。 C = INSERTROWS(A,B) 将简单地将 B 附加到 A。 如果任何输入为空，C 将返回 A。如果 A 是稀疏的，C 也将
基于JQuery的动态删除Table表格的行和列的代码
10-28
基于JQuery的动态删除Table表格的行和列的代码以前脚本之家也发布过相关的代码，大家可以参考下。
jQuery增加与删除table列的方法
10-22
主要介绍了jQuery增加与删除table列的方法,涉及jQuery针对table表格元素动态操作相关技巧,需要的朋友可以参考下
利用jquery给指定的table动态添加一行、删除一行的方法
11-22
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
table动态增加删除行列
08-11
使用javascript实现table动态增加删除行列。
el-table表格动态添加删除列
最新发布
07-27
- *1* *2* *3* [记录一次el-table动态添加删除列导致表格样式错误（或不聚集）问题](https://blog.csdn.net/gucapg/article/details/130905698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值