js操作table元素,表格的行列新增、删除汇集

合集下载

script添加删除行js随意操控table删除指定行

script添加删除行js随意操控table删除指定行

script添加删除⾏js随意操控table删除指定⾏<html><head><title>js添加删除⾏</title><script type="text/javascript">//要确定⾏的唯⼀性(提⽰:你可以使⽤你的主键)var id=1;//添加⾏的⽅法function addTr(){//获得表格对象var tb=document.getElementByIdx_x_x('testTab');//添加⼀⾏var newTr = tb.insertRow(-1);//在最下的位置//给这个⾏设置id属性,以便于管理(删除)newTr.id='tr'+id;//设置对齐⽅式(只是告诉你,可以以这种⽅式来设置任何它有的属性)newTr.align='center';//添加两列var newTd0 = newTr.insertCell();var newTd1 = newTr.insertCell();//设置列内容和属性newTd0.innerHTML = "本⾏id为:"+id; //让你看到删除的是指定的⾏newTd1.innerHTML= "<button onclick=\"moveTr('"+id+"');\" >移除</button>";;id++;}//移除⾏的⽅法function moveTr(id){//获得表格对象(注意此处是表格对象Table,如果⽤到了thead和tbody,⽽取的是tbody的对象的话,删除⾏时需要考虑索引问题,⾏索引是针对整体,⽽如果获取的是tbody对象,删除时需要的索引是针对tbody⾃⾝,所以⼀定要减去thead的⾏数,切记切记,否则就会异常)var tb=document.getElementByIdx_x_x('testTab');//根据id获得将要删除⾏的对象var tr=document.getElementByIdx_x_x('tr'+id);//取出⾏的索引,设置删除⾏的索引tb.deleteRow(tr.rowIndex);//清空列表,移除全部⾏的⽅法//while(tb_show.hasChildNodes()){//tb_show.deleteRow();//}}</script></head><body><center>表格:<table id="testTab" border="1" bordercolor="red" width="700px" height="300px"><tr><td>操控此表格</td><td>第⼆列</td></tr></table><button onclick="addTr();">添加⼀⾏</button> </center></body></html><!--。

js实现对table动态添加、删除和更新的方法

js实现对table动态添加、删除和更新的方法

js实现对table动态添加、删除和更新的⽅法本⽂实例讲述了js实现对table动态添加、删除和更新的⽅法。

分享给⼤家供⼤家参考。

具体实现⽅法如下:复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格操作</title><style type="text/css">body {font-size: 13px;line-height: 25px;}table {border-top: 1px solid #333;border-bottom: 1px solid #333;width: 300px;}td {border-right: 1px solid #333;border-bottom: 1px solid #333;}.title {text-align: center;font-weight: bold;background: #ccc;}.center {text-align: center;}#displayInfo {color: red;}</style><script type="text/javascript">function addRow() { //增加⼀⾏var tableObj = document.getElementById('myTable');var rowNums = tableObj.rows.length;var newRow = tableObj.insertRow(rowNums);var col1 = newRow.insertCell(0);col1.innerHTML = "幸福从天⽽降";var col2 = newRow.insertCell(1);col2.innerHTML = "$18.5";col2.align = "center";var divInfo = document.getElementById('displayInfo');divInfo.innerHTML = "添加商品成功";}function delRow() { //删除第⼆⾏document.getElementById('myTable').deleteRow(1);var divInfo = document.getElementById('displayInfo');divInfo.innerHTML = "删除商品成功";}function updateRow() { //更新⾏的信息var uRow = document.getElementById('myTable').rows[0];uRow.className = "title";}</script></head><body><table border="0" cellpadding="0" cellspacing="0" id="mytable"><tr id="row1"><td>书名</td><td>价格</td></tr><tr id="row2"><td>看得见风景的房间</td><td class="center">$30.00</td></tr><tr id="row3"><td>60个瞬间</td><td class="center">$32.00</td></tr></table><input name="b1" type="button" value="增加⼀⾏" onclick="javascript:addRow();"/><br /> <input name="b2" type="button" value="删除第⼆⾏" onclick="javascript:delRow();"/><br /> <input name="b3" type="button" value="修改标题" onclick="javascript:updateRow();"/><br /> <div id="displayInfo"></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。

js中表格的用法

js中表格的用法

js中表格的用法JavaScript作为一种非常流行的编程语言,在web开发中使用越来越广泛。

而表格在web开发中也是比较常见的元素。

在JS语言中,可以通过操作DOM(文档对象模型)来动态地创建表格、修改表格、删除表格等等操作。

接下来,我们就来一步一步地学习JS中表格的用法。

1. 创建表格首先,我们可以通过JS创建一个table元素,如下所示:```var table = document.createElement("table");```接着,我们可以创建一个tr(表格行)元素,并将其添加到table元素中:```var row = table.insertRow();```然后,我们可以创建一些td元素(表格单元格),并将其添加到tr元素中:```var cell1 = row.insertCell();cell1.innerHTML = "第一列";var cell2 = row.insertCell();cell2.innerHTML = "第二列";```最后,我们通过appendChild()方法将table元素添加到文档中,就可以看到我们新创建的表格了:```document.body.appendChild(table);```2. 修改表格创建表格之后,我们也可以通过JS来修改表格。

比如,我们可以动态地添加一行到表格中:```var newRow = table.insertRow();var newCell1 = newRow.insertCell();newCell1.innerHTML = "新的一行";var newCell2 = newRow.insertCell();newCell2.innerHTML = "新的一行";```此外,我们也可以通过JS来修改表格的样式,比如表格边框的颜色、字体的大小等等。

JavaScript获取表格(table)当前行的值、删除行、增加行

JavaScript获取表格(table)当前行的值、删除行、增加行

JavaScript获取表格(table)当前⾏的值、删除⾏、增加⾏<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Js获取 table当前⾏的值</title><script language=javascript>var selectedTr = null;function c1(obj) {obj.style.backgroundColor = 'blue'; //把点到的那⼀⾏变希望的颜⾊;if (selectedTr != null)selectedTr.style.removeAttribute("backgroundColor");if (selectedTr == obj)selectedTr = null;//加上此句,以控制点击变⽩,再点击反灰elseselectedTr = obj;}/*得到选中⾏的第⼀列的值*/function check() {if (selectedTr != null) {var str = selectedTr.cells[0].childNodes[0].value;document.getElementById("lab").innerHTML = str;} else {alert("请选择⼀⾏");}}/*删除选中⾏*/function del() {if (selectedTr != null) {if (confirm("确定要删除吗?")) {alert(selectedTr.cells[0].childNodes[0].value);var tbody = selectedTr.parentNode;tbody.removeChild(selectedTr);}} else {alert("请选择⼀⾏");}}</script></head><body>单击选中Tr,⾼亮显⽰,再单击取消选选中。

js动态实现表格添加和删除操作

js动态实现表格添加和删除操作

js动态实现表格添加和删除操作本⽂实例为⼤家分享了js动态实现表格添加和删除的具体代码,供⼤家参考,具体内容如下运⾏效果如图(两种实现⽅案,被注释的是第⼀种实现⽅案)代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">div{text-align:center;box-sizing: border-box;width:100%;}#div1{margin-left: 300px;width: 800px;margin-top: 50px;}#div2{margin-left: 300px;width: 800px;padding-top:50px;}#table_id{width: 580px;}</style><body><div id="div0"><div id="div1"><input type="text" id="userid" placeholder="请输⼊编号" /><input type="text" id="username" placeholder="请输⼊姓名" /><input type="text" id="gender" placeholder="请输⼊性别" /><input type="button" value="添加" id="add"/></div><div id="div2"><table border="1px" align="center" id="table_id"><caption style="font: '微软雅⿊';font-size:20px;">学⽣信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>张⽆忌</td><td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)"/></td> </tr><tr><td>1</td><td>令狐冲</td><td>张⽆忌</td><td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)" /></td> </tr><tr><td>1</td><td>令狐冲</td><td>张⽆忌</td><td><input type="button" value="删除"style="color: blue;" onclick="delTr(this)"/></td> </tr></table></div></div></body><script type="text/javascript">// 当点击添加按钮时触发下⾯的⽅法document.getElementById("add").onclick=function(){// 获取每个⽂本框中的内容var id = document.getElementById("userid").value;var name = document.getElementById("username").value;var gender = document.getElementById("gender").value;/* // 添加idvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);// 添加usernamevar td_username = document.createElement("td");var text_username = document.createTextNode(name);td_username.appendChild(text_username);// 添加gendervar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);// 添加按钮var td_button = document.createElement("td");var ele_input = document.createElement("input");ele_input.setAttribute("type","button");ele_input.setAttribute("value","删除");ele_input.setAttribute("onclick","delTr(this)");ele_input.style.color="blue";td_button.appendChild(ele_input);var ele_tr = document.createElement("tr");ele_tr.appendChild(td_id);ele_tr.appendChild(td_username);ele_tr.appendChild(td_gender);ele_tr.appendChild(td_button);var ele_table = document.getElementsByTagName("table")[0];ele_table.appendChild(ele_tr);*/// 使⽤innerHtml的⽅法动态添加表格var tab = document.getElementsByTagName("table")[0];tab.innerHTML+="<tr>\n"+"<td>"+id+"</td>\n"+"<td>"+name+"</td>"+"<td>"+gender+"</td>"+"<td><input type='button' value='删除' onclick='delTr(this)' style='color:blue'/></td>"+"</tr>"}function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></html>以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

js实现对table的增加行和删除行的操作方法

js实现对table的增加行和删除行的操作方法

js实现对table的增加⾏和删除⾏的操作⽅法如下所⽰:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>⽆标题⽂档</title></head><body><script type="text/javascript">//添加⽅法function addtr(){//var trid=0;var tab=document.getElementByIdx_x("signFrame");//添加⾏var newTR = tab.insertRow(tab.rows.length);alert(tab.rows.length);//trid++;//获取序号=⾏索引var xuhao=newTR.rowIndex.toString();alert(xuhao);newTR.id = "tr" + xuhao;//添加列:序号var newNameTD=newTR.insertCell(0);//添加列内容newNameTD.innerHTML = xuhao;//添加列:⽇期var newNameTD=newTR.insertCell(1);//添加列内容newNameTD.innerHTML = "<input name='time" + xuhao + "' id='time" + xuhao + " size='19' onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />"; //添加列:⽅式var newEmailTD=newTR.insertCell(2);//添加列内容newEmailTD.innerHTML = "<select style='width:70px;' name='way" + xuhao + "' id='way" + xuhao + "'><option value='电话'>电话</option><option value='QQ'>QQ</option> </select>";//添加列:备注var newTelTD=newTR.insertCell(3);//添加列内容newTelTD.innerHTML = "<input size='60' name='remark" + xuhao + "' id='remark" + xuhao + "' type='text' onclick='showid(this)' />";//添加列:删除按钮var newDeleteTD=newTR.insertCell(4);//添加列内容newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"deltr('tr" + xuhao + "')\">删除</a></div>";}</script><script type="text/javascript">//删除其中⼀⾏function deltr(trid){ //alert(trid);var tab=document.getElementByIdx_x("signFrame");var row=document.getElementByIdx_x(trid);var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始tab.deleteRow(index); //从table中删除//重新排列序号,如果没有序号,这⼀步省略var nextid;for(i=index;i<tab.rows.length;i++){tab.rows[i].cells[0].innerHTML = i.toString();nextid=i+1;remark=document.getElementByIdx_x("remark"+nextid);remark.id="remark";}}</script><script type="text/javascript">function showid(txt){alert(txt.id);}</script><body><input type="button" value="保存" onclick="addtr()" /><table border="1px" width="70%" id="signFrame"><tr id="trHeader"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr id="trHeader"><td width="50px">序号</td><td width="170px">时间</td><td width="100px">⽅式</td><td>备注</td><td width="80px">操作</td></tr><tr id="trHeader"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr id="trHeader"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr id="trHeader"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr id="trHeader"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table></body></html>以上就是⼩编为⼤家带来的js实现对table的增加⾏和删除⾏的操作⽅法全部内容了,希望⼤家多多⽀持~。

JavaScript动态操作表格,添加,删除行、列及单元格_表单按钮特效

JavaScript动态操作表格,添加,删除行、列及单元格_表单按钮特效
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=length+1;
var td=document.createElement("td");
<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>
</table>
</div>
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";
}
}
/*删除列,采用deleteCell(列位置)的方法*/
function removeCell(){
var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);

js-表格(table)添加列、删除列

js-表格(table)添加列、删除列
</td>
</tr>
</table>
</div>
vartxtTRLastIndex = findObj("txtTRLastIndex", document);
varrowID = parseInt(txtTRLastIndex.value);
vartab = findObj("tab", document);
varcolumnLength = tab.rows[0].cells.length;
style="text-align: center">
<tr id="tr1">
<td>
</td>
<d>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="trHeader">
<td style="background: #D3E6FE">
NO
</td>
<td style="background: #D3E6FE">
}
//添加一个列
count = 1;
function AddNewColumn() {
vartxtTDLastIndex = findObj("txtTDLastIndex", document);
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

/************ TableTool.js ******************************************************************************** ************************************************************************************************ 快速索引*************************************************************** 表格行、列删除【一】、 doTableRowDelete 说明:默认根据当前事件指向的对象,向上寻找TR,进行删除(可选参数:表格对象;删除的行的行号,按升序方式以逗号分割,如2,3,5;向上遍历TD几次,默认为1次)合并表格 ******【一】、 conbainTableRow 说明:纵向单元格的内容相同的合并,传入表格对象,需要合并的列,(可选的参数,从第几行开始);【二】、 combineCell 说明:横向单元格合并,传入单元格内一对象,(可选的参数,合并几个单元格<向右>;是否保留原单元格的值);单元格与行的移动 ******【一】、 moveUp 说明:进行上移,(可选参数,最上移动到第几行,默认为第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)【二】、 moveDown 说明:进行下移,(可选参数,最低移动到倒数第几行,默认为倒数第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)【三】、 moveCell 说明:行交换,表格对象、交换的行的行号赋值单元格样式 ******【一】、 cloneStyle 说明:将模板单元格的样式COPY到目标单元格上,模板单元格,要修正样式的单元格新增行、列 ******【一】、 insertTableRow 说明:新增行,表格对象,添加行的内容的数组(可选参数,每个单元格的colSpan的数组参数,默认取前一行的属性;添加到的行的行号,默认是最后一行)【二】、 insertTableCol 说明:新增列,表格对象,添加行的内容的数组(可选参数,每个单元格的rowSpan的数组参数,默认取前一列的属性;添加到的列的列号,默认是最后一列)获取表格中一行的元素 ******【一】、 doGetRowObj 说明:获取表格中行内的元素,表格对象,行号,(可选参数,是否copy对象,默认为false;是否获取单元格对象,默认false)其他验证与参数获取 ******【一】、 doFetchBaseCols 说明:获取列号在表格内行中的实际位置,表格对象,列号;返回一个数组,记录每行中指定的单元格的cellIndex【二】、 doFetchEffectCells 说明:获取插入当前行,被影响到rowSpan属性的单元格集合【三】、 calculateSpanWidth 说明:计算Span的宽度,根据当前span外的单元格的宽度,(可选参数:容器对象,容器对象为空时,取当前document,即遍历页面上所有的Span 对象)******************************************************************************** ******************************************************************************************************************************************* ***************************************************************//*** 删除表格的行** tdCount 根据当前event事件向上追溯TD对象几次,默认为1次** 说明:event事件需要附着在将要删除的TD内部,且不能有多重TD的嵌套;否则需要指定嵌套几层TD对象*/function doTableRowDelete(){var tablObj = arguments[0];var trIndexs = arguments[1];var tdCount = arguments[2]==undefined?1:parseFloat(arguments[2]);if(trIndexs==undefined){tdCount = tdCount-1;var tdObj = event.srcElement;var trObj,tableObj;while(tdCount > 0){tdCount--;while(tdObj.tagName != 'TD'){tdObj = tdObj.parentNode;}tdObj = tdObj.parentNode;}while(tdObj.tagName != 'TD'){tdObj = tdObj.parentNode;}trObj = tdObj.parentNode;tableObj = trObj.parentNode;if(tableObj.tagName != 'TABLE'){tableObj = tableObj.parentNode;}var cellIndex = tdObj.cellIndex;var rowIndex = trObj.rowIndex;var effectCells = doFetchEffectCells(tableObj,rowIndex);for(var i=0;i<effectCells.length;i++){effectCells[i].rowSpan = effectCells[i].rowSpan - 1;}tableObj.deleteRow(rowIndex);}else{var delIndexArr = trIndexs.split(",");for(var i=delIndexArr.length-1;i>-1;i--){tablObj.deleteRow(delIndexArr[i]);}}isDeleteFlag = true;return isDeleteFlag;}/*** 删除表格的列** tdCount 根据当前event事件向上追溯TD对象几次,默认为1次** 说明:event事件需要附着在将要删除的TD内部,且不能有多重TD的嵌套;否则需要指定嵌套几层TD对象*/function doTableColDelete(){var isDeleteFlag = false;var tdCount = arguments[0]==undefined?1:parseFloat(arguments[0]);var tdObj = event.srcElement;while(tdCount!=0){tdCount--;while(tdObj.tagName != 'TD'){tdObj = tdObj.parentNode;}}var trObj = tdObj.parentNode;var tableObj = trObj.parentNode;var cellIndex = tdObj.cellIndex;var rowIndex = trObj.rowIndex;tableObj.deleteRow(rowIndex);isDeleteFlag = true;return isDeleteFlag;}/*** 根据Span外最临近的TD的宽度计算重置当前Span的宽度** obj 可以是页面上一个容器对象,TR、TD、TABLE,此项为空,则会遍历页面上所有的Span对象*/function calculateSpanWidth(){var obj = arguments[0];var spanObjs;if(obj!=undefined){spanObjs = obj.getElementsByTagName('span');}else{spanObjs = document.getElementsByTagName('span');}for(var i=0;i<spanObjs.length;i++){var tdObj = spanObjs[i].parentNode;while(tdObj.tagName!='TD'&&typeof(tdObj)=='Object'){tdObj = tdObj.parentNode;}if(tdObj.tagName=='TD'){var offsetWidth = tdObj.offsetWidth;spanObjs[i].style.width = offsetWidth-5;}}}/*** 合并表格中纵向相邻单元格的内容相同的项** tableObj 表格对象(必须)* combainCols 需要合并的列 (格式:从小到大,连续的用-分割,独立的用逗号; 例如:1-5,7,9)* beginRowIndex 从第几行开始合并,默认从第零行开始*/function conbainTableRow(){var tableObj = arguments[0];var combainCols = arguments[1];var beginRowIndex = arguments[2]==undefined?0:arguments[2];//var beginColIndex = arguments[3]==undefined?0:arguments[3];var colsArr = combainCols.split(",");var cols = new Array();var index = 0;for(var i=0;i<colsArr.length;i++){var indexChar = colsArr[i].indexOf("-");if(indexChar!=-1){var beginIndex = parseInt(colsArr[i].substring(0,indexChar)); var endIndex = parseInt(colsArr[i].substring(indexChar+1)); for(var j=beginIndex;j<=endIndex;j++){cols[index++] = j;}}else{cols[index++] = parseInt(colsArr[i]);}}if(tableObj.rows.length>beginRowIndex){var modelArr = new Array();for(var i=beginRowIndex;i<tableObj.rows.length;i++){var row = tableObj.rows[i];for(var k=cols.length-1;k>=0;k--){var j = cols[k];if(modelArr[j]==undefined){modelArr[j] = row.cells[j];}else{if(row.cells[j].outerText == modelArr[j].outerText){ modelArr[j].rowSpan = modelArr[j].rowSpan + 1;row.deleteCell(j);}else{modelArr[j] = row.cells[j];}}}}}}/*** 行上移**minRowIndex 向上移动到的最小行号,默认时零* Elm 可以缺省,如果当前需要移动的行与激发本函数的位置有比较复杂的关系时,需要自行指名tr对象或者当前行的td对象传入** 返回,移动成功返回true,如果当前时第minRowIndex行则返回false*/function moveUp(){//传入的对象var minRowIndex = arguments[0]==undefined?0:arguments[0];//传入的对象var Elm = arguments[1];//返回值var isSuccess = false;//表格对象var myTable;if(Elm==undefined){Elm=event.srcElement;}while(Elm&&Elm.tagName!="TR"){Elm=Elm.parentElement;}//当前行号var x = Elm.rowIndex;//获取表格对象myTable = Elm.parentElement;if(myTable.tagName!='TABLE'){myTable = myTable.parentNode;}//移到上一行if (x > minRowIndex){moveCell(myTable, x, x-1);isSuccess = true;}return isSuccess;}/*** 行下移**minRowIndex 向下移动到表格的倒数几行,默认是零,即表格的最后一行* Elm 可以缺省,如果当前需要移动的行与激发本函数的位置有比较复杂的关系时,需要自行指名tr对象或者当前行的td对象传入** 返回,移动成功返回true,如果当前时最后一行则返回false*/function moveDown(){//传入的对象var minRowIndex = arguments[0]==undefined?0:arguments[0];//传入的对象var Elm = arguments[1];//返回值var isSuccess = false;//表格对象var myTable;if(Elm==undefined){Elm=event.srcElement;}while(Elm&&Elm.tagName!="TR"){Elm=Elm.parentElement;}//当前行号var x = Elm.rowIndex;//获取表格对象myTable = Elm.parentElement;if(myTable.tagName!='TABLE'){myTable = myTable.parentNode;}var tableLength = myTable.rows.length;//移到下一行if (x < tableLength-minRowIndex-1){moveCell(myTable, x, x+1);isSuccess = true;}return isSuccess;}/*** 行交换,处理了checkbox丢值的问题**myTable 表格对象* a 行号* b 行号*/function moveCell(myTable, a, b){var e2 = myTable.rows[a].all.tags("input"); var e3 = myTable.rows[b].all.tags("input"); var arr = [];//遍历a行的所有input控件for(i = 0; i < e2.length; i++) {if(e2[i].type == "checkbox"){//对所有checkbox控件添加到数组中arr.push(e2[i], e2[i].checked);}}//遍历b行的所有input控件for(i = 0; i < e3.length; i++) {if(e3[i].type == "checkbox"){//对所有checkbox控件添加到数组中arr.push(e3[i], e3[i].checked);}}myTable.moveRow(a, b);//对数组中所有元素获得对象并对引用的对象赋原值while(arr.length > 0){arr.shift().checked = arr.shift();}}/***替换单元格的样式为传入的单元格样式**tdObj 模板单元格*targetTdObj 目标替换的单元格**/function cloneStyle(){//单元格中对象var tdObj = arguments[0];//合并列数var targetTdObj = arguments[1];//克隆传入的对象var tempObj = tdObj.cloneNode(false);//克隆目标对象var targetHtml = targetTdObj.innerHTML;//横向合并的个数var colspan = targetTdObj.colSpan;//纵向合并的个数var rowspan = targetTdObj.rowSpan;//宽度var width = targetTdObj.width;//行对象var rowObj = tdObj.parentNode;//替换当前单元格rowObj.replaceChild(tempObj, targetTdObj);//for(var i=0;i<targetObj.childNodes.length;i++){ // tempObj.appendChild(targetObj.childNodes[i]); //}tempObj.innerHTML = targetHtml;tempObj.colSpan = colspan;tempObj.rowSpan = rowspan;tempObj.width = width;}/*** 合并单元格,TODO:行合并暂未实现** obj 单元格中对象* colspan 合并列数* rowspan 合并的行数*keepFlag 是否保留每个单元格的值*/function combineCell(){//单元格中对象var obj = arguments[0];//合并列数var colspan = arguments[1]==undefined?1:arguments[1];//合并的行数var rowspan = arguments[2]==undefined?1:arguments[2];//是否保留每个单元格的值var keepFlag = arguments[3]==undefined?false:arguments[3];var elementObjs = new Array();var tdObj = obj.tagName!='TD'?obj.parentNode:obj;var trObj = tdObj.parentNode;var tableObj = trObj.parentNode;if(tableObj.tagName!='TABLE'){tableObj = tableObj.parentNode;}//当前单元格的原来的格式var colIndex = tdObj.cellIndex;var rowIndex = trObj.rowIndex;////var colIndexs;//if(rowspan>1){// colIndexs = doFetchBaseCols(tableObj,doGetColIndex(obj)); //}for(var i=colspan-1;i>0;i--){//alert("i+colIndex="+(i+colIndex));//alert("trObj.cells.length="+trObj.cells.length);var tempObj = trObj.cells[i+colIndex].cloneNode(true);elementObjs[elementObjs.length] = tempObj;trObj.removeChild(trObj.cells[i+colIndex]);}tdObj.colSpan = tdObj.colSpan + colspan - 1;//alert("keepFlag="+keepFlag);//alert("elementObjs.length="+elementObjs.length);//添加每个单元格的对象if(keepFlag&&elementObjs.length>0){for(var i=elementObjs.length-1;i>-1;i--){var tempObj = elementObjs[i];for(var j=0;j<tempObj.childNodes.length;j++){tdObj.appendChild(tempObj.childNodes[j]);}}}}/*** 对表格新增一行** tableObj 被新增的表格对象* htmlArr添加内容对象数组,* htmlCols 每个td的元素对应的colSpan参数,为空则获取之前的Tr信息,否则根据htmlCols生成* rowIndex 行号默认方式在最后一行新增行,从零开始**返回新增成功、失败*/function insertTableRow(){//表格对象var tableObj = arguments[0];//增加对象集var htmlArr = arguments[1];//元素的TD的colSpan属性var htmlCols = arguments[2]==undefined?new Array():arguments[2];//增加的行位置var rowIndex = arguments[3];//根据当前table表的行数,进行参数的处理if(tableObj==undefined||tableObj.rows==undefined){rowIndex = 0;}else if(rowIndex==undefined||rowIndex>tableObj.rows.length){rowIndex = tableObj.rows.length;}//新增行成功标志,默认失败var isSuccess = doCheckPara(tableObj,htmlArr,htmlCols,rowIndex);if(isSuccess){//新增行//alert("tableObj="+tableObj.rows.length+"\nrowIndex="+rowIndex);//alert("htmlArr.length="+htmlArr.length);var newTrObj = tableObj.insertRow(rowIndex);for(var i=0;i<htmlArr.length;i++){var cellObj = newTrObj.insertCell(i);//判断传入参数不为空,添加对象if(htmlArr[i]!=undefined && htmlArr[i]!=null){if(htmlArr[i].constructor == Array){var childHtmlArr = htmlArr[i];for(var k=0;k<childHtmlArr.length;k++){if(typeof(childHtmlArr[k])=='object'){cellObj.appendChild(childHtmlArr[k]);}}}else{if(typeof(htmlArr[i])=='object'){cellObj.appendChild(htmlArr[i]);}else{cellObj.innerHTML = htmlArr[i];}}}if(htmlCols[i]!=undefined && htmlCols[i]!="" && htmlCols[i]!="1"){ cell.colSpan=htmlCols[i];}}isSuccess = true;}return isSuccess;}/*** 对表格新增一行** tableObj 被新增的表格对象* htmlArr 添加内容对象数组,* htmlRows 每个td的元素对应的rowSpan参数,为空则获取之前的Td信息,否则根据htmlRows生成* colIndex 行号默认方式在最后一列新增列(此处的指定列进行插入,在表格中存在rowSpan!=1的情况下会有有问题),从零开始**返回新增成功、失败*/function insertTableCol(){//表格对象var tableObj = arguments[0];//增加对象集var htmlArr = arguments[1];//元素的TD的rowSpan属性var htmlRows = arguments[2]==undefined?new Array():arguments[2];//增加的列位置var colIndex = arguments[3];//alert(colIndex);var baseHtmlCols = doFetchBaseCols(tableObj,colIndex);//判断返回为undefined,则表示当前不可进行插入操作if(baseHtmlCols==undefined){return false;}//新增行成功标志,默认失败var isSuccess = doCheckPara(tableObj,htmlArr,htmlRows,colIndex,false,baseHtmlCols);if(isSuccess){//新增行var rowSpanCount = 0;var rowIndex = 0;//alert("htmlArr.length="+htmlArr.length);for(vari=0,rowIndex=0;rowIndex<tableObj.rows.length&&rowIndex<htmlArr.length;i++){ var trObj = tableObj.rows[rowIndex];var index = baseHtmlCols[rowIndex];var cellObj = trObj.insertCell(index);//判断传入参数不为空,添加对象if(htmlArr[i]!=undefined && htmlArr[i]!=null){if(htmlArr[i].constructor == Array){var childHtmlArr = htmlArr[i];for(var k=0;k<childHtmlArr.length;k++){if(typeof(childHtmlArr[k])=='object'){cellObj.appendChild(childHtmlArr[k]);}}}else{if(typeof(htmlArr[i])=='object'){cellObj.appendChild(htmlArr[i]);}else{cellObj.innerHTML = htmlArr[i];}}}if(htmlRows[i]!=undefined && htmlRows[i]!="" && htmlRows[i]!="1"){ cellObj.rowSpan=htmlRows[i];}//alert(htmlRows[0]+"\n"+htmlRows[1]+"\n"+htmlRows[2]+"\n"+htmlRows[3]+"\n");//跳过已经被合并的行rowIndex = rowIndex + (htmlRows[i]!=undefined?parseFloat(htmlRows[i]):1);//alert(rowIndex);}isSuccess = true;}return isSuccess;}/***获取表格中一行的元素,对象数组,返回单元格对象数组、单元格的第一个子对象数组** tableObj 表格对象* rowIndex 获取的行号,从零开始* isCopy 获取copy对象,默认为false,不进行copy* isCellObj 获取单元格对象数组标志,,默认为false,返回单元格的子对象*/function doGetRowObj(){var objArr = new Array();//表格对象var tableObj = arguments[0];//增加对象集var rowIndex = arguments[1];//是否获取COPY对象var isCopy = arguments[2]==undefined?false:arguments[2];//是否为单元格对象var isCellObj = arguments[3]==undefined?false:arguments[3];//c判断为当前为拷贝时if(isCopy){//var copyTable = document.body.createTextRange();//copyTable.moveToElementText(tableObj);var memeoryTable = tableObj.cloneNode(true);tableObj = memeoryTable;}//判断对象为空或者不是一个表格对象时if(tableObj==undefined || tableObj.tagName!="TABLE"){alert("传入表格(tableObj)不是一个对象或表格!");return objArr;}//判断表格内容为空时if(tableObj.rows==undefined||tableObj.rows.length==0){alert("当前表格对象为空!");return objArr;}//判断要读取的行参数为空if(rowIndex==undefined){alert("未指名获取的行号!");return objArr;}//判断当前要获取的行超过表格对象的范围if(rowIndex<0 || rowIndex>=tableObj.rows.length){alert("要获取的行号不在当前的表格对象内!");return objArr;}//进行行内容提取,返回对象var rowObj = tableObj.rows[rowIndex];for(var i=0;i<rowObj.cells.length;i++){var cellObj = rowObj.cells[i];var objCopy;//返回当前单元格if(isCellObj){objCopy = cellObj;}else{objCopy = cellObj.childNodes!=undefined?cellObj.childNodes[0]:undefined;}objArr[i] = objCopy;}return objArr;}/***进行列或者行插入前的check,如果默认的colSpan与rowSpan不存在则根据行去前一行、列取前一列的思路获取默认值** tableObj 表格对象* htmlArr 内容对象数组,* htmlSpan 元素的TD的colSpan、rowSpan属性* index 行号增加的行、列位置,从零开始*/function doCheckPara(){//表格对象var tableObj = arguments[0];//增加对象集var htmlArr = arguments[1];//元素的TD的colSpan、rowSpan属性var htmlSpan = arguments[2];//增加的行、列位置var index = arguments[3];//alert("tableObj="+tableObj+"\nhtmlArr.length="+htmlArr.length+"\nhtmlSpan.length="+htmlSpan.length+"\nindex="+index);//新增列、行标志,默认为行追加var isRowInsert = arguments[4]==undefined?true:false;var baseHtmlCols = arguments[5];//新增行成功标志,默认失败var isSuccess = false;if(tableObj==undefined||tableObj.tagName!="TABLE"){alert("传入表格(tableObj)不是一个对象或表格!");return isSuccess;}//传入的为表格else{//验证逻辑上的错误if(htmlArr==undefined){alert("传入的对象数组(htmlArr)为空或未定义!");return isSuccess;}else if(htmlSpan.length>0 && htmlSpan.length!=htmlArr.length){alert("传入的属性(htmlCols)与增加对象集(htmlArr)的长度不等!"); return isSuccess;}//行追加if(isRowInsert){var tableRowLength = tableObj.rows!=undefined?tableObj.rows.length:0;//设置初始值//设置元素对应的colSpan的属性,默认取当前要插入行的前一行的属性if(htmlSpan.length==0 && index>0 && index<tableRowLength){//获取临近一行对象var lastTrObj = tableObj.rows[index-1];//获取默认TD样式与当前存入元素不对应,无法插入if(lastTrObj.childNodes.length!=htmlArr.length){alert("插入失败,获取默认单元格的colSpan属性的个数与传入对象的个数不相等!");return isSuccess;}else {for(var i=0;i<lastTrObj.childNodes.length;i++){var cellObj = lastTrObj.childNodes[i];//列属性htmlSpan[i] = cellObj.colSpan!=undefined?cellObj.colSpan:"1";}}}}//列追加时else{var tableRowLength = tableObj.rows!=undefined?tableObj.rows.length:0;if(index!=undefined && index>0 && htmlSpan.length==0){for(var i=0,k=0;i<tableRowLength;i++){if(baseHtmlCols[i]!=undefined && baseHtmlCols[i]>0){ var lastTrObj = tableObj.rows[i];//alert("baseHtmlCols[i]="+baseHtmlCols[i]);//alert("lastTrObj.cells.length="+lastTrObj.cells.length);var lastTdRowSpan = lastTrObj.cells[parseInt(baseHtmlCols[i])-1].rowSpan;htmlSpan[k++] = lastTdRowSpan;}}if(htmlSpan.length!=htmlArr.length){alert("插入失败,获取默认单元格的rowSpan属性的个数与传入对象的个数不相等!");return isSuccess;}}}}isSuccess = true;return isSuccess;}/***获取表格在指定列在实际行中位置**tableObj 表格对象(必须项)*index 指定的列,数值(必须项),从零开始**return baseHtmlCols行中指定列的实际位置,一般情况下返回一个数组,出错时返回一个undefined对象*/function doFetchBaseCols(){var tableObj = arguments[0];var index = arguments[1];var noAlert = arguments[2]==undefined?false:arguments[2];// 需要返回的行实际位置var baseHtmlCols = new Array();//alert("tableObj="+tableObj);//获取初始值,指定的列for(var i=0;i<tableObj.rows.length;i++){baseHtmlCols[i] = index;}if(index!=0){//进行值获取for(var i=0;i<tableObj.rows.length;i++){var row = tableObj.rows[i];//默认插入列if(index==undefined){baseHtmlCols[i] = row.cells.length;}//生成实际的列值else{var colsIndex = 0;//计算当前行的个数for(var j=0;j<row.cells.length;j++){if(j==baseHtmlCols[i]){break;}var cell = row.cells[j];//合并的行数var rowSpanIndex = cell.rowSpan!=undefined?cell.rowSpan:0;//合并的列数var colSpanIndex = cell.colSpan!=undefined?cell.colSpan:1;//将当前行减去该TD的colspan参数的影响baseHtmlCols[i] = baseHtmlCols[i] - (colSpanIndex-1);//循环行,将当前合并的列影响到的列,均调整相应的个数for(var k=1;k<rowSpanIndex;k++){baseHtmlCols[i+k] = baseHtmlCols[i+k] - colSpanIndex;}//判断当前指定的列被跳过,因为当前列已经被合并if(j+(colSpanIndex-1) > baseHtmlCols[i]){if(!noAlert){alert("遍历到第"+i+"行时,因为当前插入的列包含在第"+j+"列合并的单元格内,无法在此处进行操作!");}return undefined;}//判断当前行遍历到指定的列时else if(j == baseHtmlCols[i]){break;}}}}}return baseHtmlCols;}/*** 根据表格的一个td的子项,返回当前对象所在列的每个单元格对应的行的位置**obj 传入的表格中某个td的一个子对象*isComplexTable 是否复杂表格标志,默认下都使用false,1、简单表格,根据该单元格之前的部分就能计算出当前列在表格中的绝对位置的,就设置成false,或者不定义2、针对删除的单元格所在的行存在受之前行中单元格的rowspan与colspan影响,而使得得到的colIndex列的绝对位置**返回一个长度为表格的行个数,存有该列在每行中的位置**缺陷,如果表格比较复杂,页面上显示的一列但是在实际行中不是相等的位置*/function doGetColIndex(obj){var obj = arguments[0];var isComplexTable = arguments[1]==undefined?false:arguments[1];var tdObj = obj.parentNode;var trObj = tdObj.parentNode;var tableObj = trObj.parentNode;if(tableObj.tagName!='TABLE'){tableObj = tableObj.parentNode;}//当前行下的第几列var colIndex = tdObj.cellIndex;//当前行是第几行var rowIndex = trObj.rowIndex;//定义一个需要返回的值var arrColsIndex;//alert("colIndex="+colIndex);//alert("rowIndex="+rowIndex);//alert("isComplexTable="+isComplexTable);if(isComplexTable){for(var i=0;true;i++){arrColsIndex = doFetchBaseCols(tableObj,i);if(arrColsIndex!=undefined){if(arrColsIndex[rowIndex]==colIndex){break;}else if(arrColsIndex[rowIndex]>colIndex){alert("出错当前方法不支持合并列的操作!");return undefined;}}}}else{for(var i=colIndex-1;i>-1;i--){//alert("colIndex="+colIndex);var ChildObj = trObj.cells[i];var colspanIndex = ChildObj.colSpan-1;//alert("colspanIndex="+colspanIndex);colIndex = colIndex + colspanIndex;}//alert('begin');//alert("colIndex="+colIndex);arrColsIndex = doFetchBaseCols(tableObj,colIndex);}return arrColsIndex;}/***获取删除当前行,影响到单元格rowSpan属性的单元格集,此处只能遍历到该行之前的受影响的单元格;如果当前行存在rowSpan属性存在大于1的,本方法未遍历到**tableObj 表格对象(必须项)*index 指定的行,数值(必须项)**return effectCells,一般情况下返回一个数组,出错时返回一个undefined对象*/function doFetchEffectCells(){var tableObj = arguments[0];var index = arguments[1];//插入当前会影响到rowSpan属性的单元格对象集var effectCells = new Array();//判断新增的行在表格的中间时if(index>0&&index<tableObj.rows.length){for(var i=0,k=0;i<index;i++){var row = tableObj.rows[i];for(var j=0;j<row.cells.length;j++){var cellObj = row.cells[j];var rowSpanIndex = cellObj.rowSpan!=undefined?cellObj.rowSpan:1;if(i+rowSpanIndex>index){effectCells[k++] = cellObj;}}}}return effectCells;}。

相关文档
最新文档