js操作table元素,表格的行列新增、删除汇集
纯原生js实现table表格的增删
纯原⽣js实现table表格的增删公司实习⽣问我table的增删操作,⽤jQuery很简单的实现了。
⼜问我不使⽤jQuery,只使⽤js如何实现。
⾯对这种情况,我的⼀贯做法是‘不理解,但是⽀持'。
jQuery⽤的多了,⼈也懒了,但还是⽤js实现了这⼀操作,觉得难点在于IE兼容。
只是想找代码看看的可以跳过分析过程,⽂章底部附有完整代码。
以下是coding过程:HTML结构代码⼀个基本的table结构,增加了⼀些简单的样式,三个按钮分别对应创建、清空,和⼀个预留。
<!DOCTYPE HTML><html><head><title>table</title><meta charset='utf-8' /><style type="text/css">table.base{border-collapse:collapse;text-align: center;border: 1px solid black;}table, tr, td, th{border: 1px solid black;}</style></head><body><div id="main-content"><table id="main-table" class="base"><thead><tr><th colspan="3">This is a table for operations by javascript</th></tr><tr><th><input type="button" value="CREATE" id="cp_btn" onclick="createTr()" /></th><th><input type="button" value="CLEAR" id="cl_btn" onclick="clearTrs()" /></th><th><input type="button" value="GUESS" id="cl_btn"/></th></tr></thead><tbody></tbody></table></div></body></html>构造函数(伪构造函数)考虑过,创建⼀个隐藏的tr,基于此tr执⾏创建操作。
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动态添加、删除和更新的⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下:复制代码代码如下:<!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程序设计有所帮助。
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实现对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> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td> </td></tr><tr id="trHeader"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr id="trHeader"><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr id="trHeader"><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table></body></html>以上就是⼩编为⼤家带来的js实现对table的增加⾏和删除⾏的操作⽅法全部内容了,希望⼤家多多⽀持~。
js-表格(table)添加列、删除列
</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);
js操作table元素,表格的行列新增、删除汇集
spanObjs[i].style.width = offsetWidth-5;
其他验证与参数获取 ******
【一】、 doFetchBaseCols 说明:获取列号在表格内行中的实际位置,表格对象,列号;返回一个数组,记录每行中指定的单元格的cellIndex
【二】、 doFetchEffectCells 说明:获取插入当前行,被影响到rowSpan属性的单元格集合
***********************************************************************************************************************************************/
【二】、 combineCell 说明:横向单元格合并,传入单元格内一对象,(可选的参数,合并几个单元格<向右>;是否保留原单元格的值);
单元格与行的移动 ******
【一】、 moveUp 说明:进行上移,(可选参数,最上移动到第几行,默认为第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)
while(tdCount > 0){
tdCount--;
while(tdObj.tagName != 'TD'){
tdObj = tdObj.parentNode;
【二】、 moveDown 说明:进行下移,(可选参数,最低移动到倒数第几行,默认为倒数第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)
【三】、 moveCell 说明:行交换,表格对象、交换的行的行号
javascript表格操作要点
一、简介Javascript是一种用于网页开发的脚本语言,它具有强大的表格操作功能,可以实现前端页面中表格数据的添加、删除、修改和查询等操作。
本文将介绍Javascript表格操作的要点,以及如何利用Javascript实现表格操作功能。
二、表格基本操作1. 创建表格使用Javascript可以动态创建表格,通过document.createElement()函数创建表格元素,并添加到页面中。
代码示例:```javascriptvar table = document.createElement("table");document.body.appendChild(table);```2. 添加表格行和单元格使用Javascript可以动态添加表格行和单元格,通过嵌套循环创建表格行和单元格,并将其添加到表格中。
代码示例:```javascriptvar table = document.createElement("table");for (var i = 0; i < 5; i++) {var row = table.insertRow(i);for (var j = 0; j < 3; j++) {var cell = row.insertCell(j);cell.innerHTML = "单元格";}}document.body.appendChild(table);```3. 删除表格行和单元格使用Javascript可以动态删除表格行和单元格,通过Table元素的deleteRow()和deleteCell()方法删除行和单元格。
代码示例:```javascriptvar table = document.getElementById("myTable");table.deleteRow(0); // 删除第一行table.rows[0].deleteCell(0); // 删除第一行的第一个单元格```4. 修改表格内容使用Javascript可以动态修改表格的内容,通过Table元素的rows 和cells属性获取表格的行和单元格,进而修改其内容。
表格table的增加行列删除行列以及合并单元格
<html><head><script language="javascript" type="text/javascript">function findObj(theObj, theDoc) {var p, i, foundObj;if (!theDoc) theDoc = document;if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);}if (!(foundObj = theDoc[theObj]) && theDoc.all)foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj && yers && i < yers.length; i++) foundObj = findObj(theObj, yers[i].document);if (!foundObj && document.getElementById)foundObj = document.getElementById(theObj); return foundObj;}//添加一个列count = 1;function AddNewColumn() {var txtTDLastIndex = findObj("txtTDLastIndex", document);var columnID = parseInt(txtTDLastIndex.value);var tab = document.getElementById("tab");var rowLength = tab.rows.length;var columnLength = tab.rows[1].cells.length;for (var i = 0; i < rowLength; i++) {if (i == 0) {var oTd = tab.rows[0].insertCell(columnLength);oTd.innerHTML = "<div align='center' style='width:98%;height:98%;font-size:12px;'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";} else if (i == 1) {//第一列:序号var oTd = tab.rows[1].insertCell(columnLength);oTd.innerHTML = "<div style='background: #D3E6FE;width=98%;height:98%;'>" + (++count) + "</div>";} else if (i > 1) {var oTd = tab.rows[i].insertCell(columnLength);oTd.id = "column" + columnID;oTd.innerHTML = "<textarea id='' rows='2' style='width:98%; height:98%; font-size:12px;'></textarea>";}}}//添加一个行var index = 1;function AddNewRow() {var txtTRLastIndex = findObj("txtTRLastIndex", document);var rowID = parseInt(txtTRLastIndex.value);var tab = findObj("tab", document);var columnLength = tab.rows[0].cells.length;//添加行var newTR = tab.insertRow(tab.rows.length);newTR.id = "SignItem" + rowID;for (var i = 0; i < columnLength; i++) {if (i == 0) {//第一列:序号newTR.insertCell(0).innerHTML = ++index;} else if (i > 0 && i < 2) {newTR.insertCell(i).innerHTML = "<textarea id='' rows='2' style='width:98%; height:98%;font-size:12px;'></textarea>";}else if (i >= 2) {newTR.insertCell(i).innerHTML = "<textarea id='' rows='2' style='width:98%; height:98%;font-size:12px;'></textarea>";}}//添加列:删除按钮var lastTd = newTR.insertCell(columnLength);lastTd.innerHTML = "<div align='center' style='width:98%;height:98%;font-size:12px;'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";//将行号推进下一行txtTRLastIndex.value = (rowID + 1).toString();}//删除指定行function DeleteSignRow(rowid) {var tab = findObj("tab", document);var signItem = findObj(rowid, document);//获取将要删除的行的Indexvar rowIndex = signItem.rowIndex;//删除指定Index的行tab.deleteRow(rowIndex);//重新排列序号,如果没有序号,这一步省略for (i = 2; i < tab.rows.length; i++) {tab.rows[i].cells[0].innerHTML = i - 1;}--index}//删除指定列function DeleteSignColumn(columnId) {var tab = document.getElementById("tab");var columnLength = tab.rows[1].cells.length;//删除指定单元格for (var i = 0; i < tab.rows.length; i++) {tab.rows[i].deleteCell(columnId);}//重新排列序号,如果没有序号,这一步省略var column = columnLength - 1;for (var j = 1; j < column; j++) {tab.rows[1].cells[j].innerHTML = "<div style='background: #D3E6FE;width=98%;height:98%;'>" + j + "</div>";}--count;}//清空列表function ClearAllSign() {index = 0;var tab = findObj("tab", document);var rowscount = tab.rows.length;//循环删除行,从最后一行往前删除for (i = rowscount - 1; i > 1; i--) {tab.deleteRow(i);}//重置最后行号为1var txtTRLastIndex = findObj("txtTRLastIndex", document);txtTRLastIndex.value = "1";//预添加一行AddNewRow();}function rebulid() {var tab = findObj("tab", document);var beginRow = document.getElementById("beginRow").value; /*开始行*/beginRow = parseInt(beginRow) + 1;var endRow = document.getElementById("endRow").value; /*结束行*/endRow = parseInt(endRow) + 1;var beginCol = document.getElementById("beginCol").value; /*开始列*/var endCol = document.getElementById("endCol").value; /*结束列*/tab.rows[beginRow].cells[beginCol].rowSpan = (endRow - beginRow) + 1;tab.rows[beginRow].cells[beginCol].colSpan = (endCol - beginCol) + 1;for (var rows = beginRow; rows <= endRow; rows++) {if (rows == beginRow) {for (var cols = endCol; cols >= parseInt(beginCol) + 1; cols--) {tab.rows[rows].deleteCell(cols);}}else {for (var cols = endCol; cols >= beginCol; cols--) {tab.rows[rows].deleteCell(cols);}}}tab.rows[beginRow].cells[beginCol].innerHTML = "<textarea id='' style='width:98%; height:100%;font-size:12px;'></textarea>";}function huoqu() {//确定所添加表格的HTMLvar tab = document.getElementById("tab");var lbltxt = document.getElementById("xianshi");var leng = tab.rows[1].cells.length;leng = parseInt(leng) - 1;var rows = parseInt(tab.rows.length) - 1;var beginRow = document.getElementById("beginRow").value;for (var i = 2; i <= rows; i++) {if (i == 2) {for (var j = 1; j <= parseInt(tab.rows[i].cells.length) - 1; j++) {var colspan = tab.rows[i].cells[j].colSpan;var rowspan = tab.rows[i].cells[j].rowSpan;var values = tab.rows[i].cells[j].innerText;}}else {for (var j = 1; j <= parseInt(tab.rows[i].cells.length) - 2; j++) {var colspan = tab.rows[i].cells[j].colSpan;var rowspan = tab.rows[i].cells[j].rowSpan;var values = tab.rows[i].cells[j].innerText;}}}}</script></head><body><div style="height: 100%; width: 100%; padding: 10px; font-size: 12px;"><table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"><tr id="tr1"><td></td><td></td></tr><tr id="trHeader"><td style="background: #D3E6FE">ID</td><td style="background: #D3E6FE">1</td></tr><tr><td>1</td><td><textarea id='textItem0' rows='2' style='width: 98%; height: 98%;'></textarea></td></tr></table><table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center"><tr><td style="background: #D3E6FE"></td><td style="background: #D3E6FE"><input type="button" name="Submit" id="Submit" value="新增行" onclick="AddNewRow()" /></td><td style="background: #D3E6FE"><input type="button" name="Submit1" id="Submit1" value="新增列" onclick="AddNewColumn()" /></td><td style="background: #D3E6FE"><input type="button" name="Submit2" id="Submit2" value="全部清空" onclick="ClearAllSign()" /></td><td style="background: #D3E6FE"><input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /><input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="1" /></td></tr></table><table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center"><tr><td>从第<input type="text" id="beginRow" name="beginRow" value="" />行到<input type="text"name="endRow" id="endRow" value="" />行</td><td rowspan="2" id="Td1"><input type="button" name="hebing" id="hebing" value="合并" onclick="rebulid();" /></td></tr><tr><td>从第<input type="text" name="beginCol" id="beginCol" value="" />列到<input type="text"name="endCol" id="endCol" value="" />列</td></tr></table></div></body></html>。
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
JS实现的表格操作类详解(添加,删除,排序,上移,下移)本⽂实例讲述了JS实现的表格操作类。
分享给⼤家供⼤家参考,具体如下:运⾏效果截图如下:点击此处查看。
具体代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">*{font-size:14px}button{margin:3px}</style><script type="text/javascript">var mytable=null,mytable2=null;window.onload=function(){mytable=new CTable("tbl",10);mytable2=new CTable("tbl2",6);}Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}function $A(arrayLike){for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);return ret}Function.prototype.bind = function() {var __method = this, args = $A(arguments), object = args.shift();return function() {return __method.apply(object, args.concat($A(arguments)));}}function CTable(id,rows){this.tbl=typeof(id)=="string"?document.getElementById(id):id;if (rows && /^\d+$/.test(rows)) this.addrows(rows)}CTable.prototype={addrows:function(n){ //随机添加n个trnew Array(n).each(this.add.bind(this))},add:function(){ //添加1个trvar self=this;var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);var chkbox=document.createElement("INPUT")chkbox.type="checkbox"chkbox.onclick=self.highlight.bind(self)td1.appendChild(chkbox)td1.setAttribute("width","35")td2.innerHTML=Math.ceil(Math.random()*99)td3.innerHTML=Math.ceil(Math.random()*99)},del:function(){ //删除所选trvar self=this$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})},up:function(){ //上移所选trvar self=thisvar upOne=function(tr){ //上移1个trif (tr.rowIndex>0){self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])self.getChkBox(tr).checked=true}}var arr=$A(self.tbl.rows).reverse()if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});},down:function(){var self=thisvar downOne=function(tr){if (tr.rowIndex<self.tbl.rows.length-1) {self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);self.getChkBox(tr).checked=true;}}var arr=$A(self.tbl.rows)if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){for(var i=arr.length-1;i>=0;i--){if (self.getChkBox(arr[i]).checked){arr.pop()}else{break}}}arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});},sort:function(){ //排序var self=this,order=arguments[0];var sortBy=function(a,b){if (typeof(order)=="number"){ //数字,则按数字指⽰的列排序return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型⽐较⼤⼩}else if (typeof(order)=="function"){ //为程序,按程序的返回结果排序return order(a,b);}else{return 1;}}$A(self.tbl.rows).sort(sortBy).each(function(x){var checkStatus=self.getChkBox(x).checked;self.tbl.firstChild.appendChild(x);if (checkStatus) self.getChkBox(x).checked=checkStatus;});},rnd:function(){ //随即选择⼏⾏trvar self=this,selmax=0,tbl=self.tbl;if (tbl.rows.length){selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的⾏数不超过tr数的1/4$A(tbl.rows).each(function(x){self.getChkBox(x).checked=false;self.restoreBgColor(x)})}else{return alert("⽆数据可以选")}new Array(selmax).each(function(){var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]self.getChkBox(tr).checked=true;self.highlight({target:self.getChkBox(tr)})})},highlight:function(){ //设置tr的背景⾊var self=this;var evt=arguments[0] || window.eventvar chkbox=evt.srcElement || evt.targetvar tr=chkbox.parentNode.parentNodechkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)},swapTr:function(tr1,tr2){ //交换tr1和tr2的位置var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;var tBody=tr1.parentNodetBody.replaceChild(tr2,tr1);tBody.insertBefore(tr1,target);},getChkBox:function(tr){ //从tr得到 checkbox对象return tr.cells[0].firstChild},restoreBgColor:function(tr){tr.style.backgroundColor="#ffffff"setBgColor:function(tr){tr.style.backgroundColor="#c0c0c0"}}function f(a,b){var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; return sumRow(a)>sumRow(b)?1:-1;}</script></head><body><button onClick="javascript:mytable.rnd()">随机选择⾏</button><button onClick="javascript:mytable.add()">添加⼀⾏</button><button onClick="javascript:mytable.del()">删除选定⾏</button><button onClick="javascript:mytable.up()">上移选定⾏</button><button onClick="javascript:mytable.down()">下移选定⾏</button><button onClick="javascript:mytable.sort(1)">按第⼀列数字排序</button><button onClick="javascript:mytable.sort(f)">按每⾏数据的和排序</button><table width=100%><tr><td valign="top"><table border id="tbl" width="80%"></table></td><td valign="top"><table border id="tbl2" width="80%"></table></td></tr></table><button onClick="javascript:mytable2.rnd()">随机选择⾏</button><button onClick="javascript:mytable2.add()">添加⼀⾏</button><button onClick="javascript:mytable2.del()">删除选定⾏</button><button onClick="javascript:mytable2.up()">上移选定⾏</button><button onClick="javascript:mytable2.down()">下移选定⾏</button><button onClick="javascript:mytable2.sort(2)">按第⼆列数字排序</button><button onClick="javascript:mytable2.sort(f)">按每⾏数据的和排序</button></body></html>希望本⽂所述对⼤家JavaScript程序设计有所帮助。
vuejselementtable表格添加行,修改,单独删除行,批量删除行操作
vuejselementtable表格添加⾏,修改,单独删除⾏,批量删除⾏操作1.表格动态添加,也可删除<template><div class="TestWord"><el-button @click="addLine">添加⾏数</el-button><el-button @click="save">保存</el-button><el-table:data="tableData"style="width: 100%"><el-table-column prop="bookname" label="书名"><template slot-scope="scope"><el-input v-model="scope.row.bookname" placeholder="书名"></el-input></template></el-table-column><el-table-column prop="bookvolume" label="册数"><template slot-scope="scope"><el-input v-model="scope.row.bookvolume" placeholder="册数"></el-input></template></el-table-column><el-table-column prop="bookbuyer" label="购买者"><template slot-scope="scope"><el-input v-model="scope.row.bookbuyer" placeholder="购买者"></el-input></template></el-table-column><el-table-column prop="bookborrower" label="借阅者"><template slot-scope="scope"><el-input v-model="scope.row.bookborrower" placeholder="借阅者"></el-input></template></el-table-column><el-table-column prop="bookbuytime" label="购买⽇期"><template slot-scope="scope"><el-date-pickerv-model="scope.row.bookbuytime"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="购买⽇期"></el-date-picker></template></el-table-column><el-table-column prop="bookbuytime" label="购买⽇期"><template slot-scope="scope"><el-buttonsize="mini"type="danger"v-if="!scope.row.editing"icon="el-icon-delete"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template>vuejs 代码export default {name:'TestWorld',data() {return {tableData:[{bookname: '',bookbuytime: '',bookbuyer: '',bookborrower: '',bookvolume:''}]}},methods:{addLine(){ //添加⾏数var newValue = {bookname: '',bookbuytime: '',bookbuyer: '',bookborrower: '',bookvolume:''};//添加新的⾏数this.tableData.push(newValue);},handleDelete(index){ //删除⾏数this.tableData.splice(index, 1)},save(){//这部分应该是保存提交你添加的内容console.log(JSON.stringify(this.tableData))}}}运⾏图⽚2.编辑表格(即使input已经修改过,当点击取消时,内容不会变)<template><div class="TestWorld"><el-button @click="savemodify">保存</el-button><el-table:data="modifyData"style="width: 100%"><el-table-column prop="bookname" label="书名"><template slot-scope="scope"><template v-if="scope.row.editing"><el-input class="edit-input" v-model="scope.row.bookname" placeholder="书名"></el-input> </template><span v-else>{{ scope.row.bookname }}</span></template></el-table-column><el-table-column prop="bookvolume" label="册数"><template slot-scope="scope"><template v-if="scope.row.editing"><el-input class="edit-input" v-model="scope.row.bookvolume" placeholder="册数"></el-input> </template><span v-else>{{ scope.row.bookvolume}}</span></template></el-table-column><el-table-column prop="bookbuyer" label="购买者"><template slot-scope="scope"><template v-if="scope.row.editing"><el-input class="edit-input" v-model="scope.row.bookbuyer" placeholder="购买者"></el-input></template><span v-else>{{scope.row.bookbuyer}}</span></template></el-table-column><el-table-column prop="bookborrower" label="借阅者"><template slot-scope="scope"><template v-if="scope.row.editing"><el-input class="edit-input" v-model="scope.row.bookborrower" placeholder="借阅者"></el-input> </template><span v-else>{{scope.row.bookborrower}}</span></template></el-table-column><el-table-column prop="bookbuytime" label="购买⽇期"><template slot-scope="scope"><template v-if="scope.row.editing"><el-date-pickerv-model="scope.row.bookbuytime"type="date"value-format="yyyy-MM-dd"placeholder="购买⽇期"></el-date-picker></template><span v-else>{{scope.row.bookbuytime}}</span></template></el-table-column><el-table-column prop="editing" label="操作"><template slot-scope="scope"><el-buttontype="danger"v-if="!scope.row.editing"icon="el-icon-delete"v-model="scope.$index"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonv-elsetype="danger"icon="el-icon-delete"v-model="scope.$index"@click="handleCancle(scope.$index, scope.row)">取消</el-button></template></el-table-column></el-table></div></template>vuejs 代码export default {name:'TestWorld',data() {return {modifyData:[],prevValue:{}}},mounted(){this.getData()},methods:{getData(){this.$ajax({method: 'get',url:'../static/json/1.1.1.json', //<---本地地址//url: '/api/drummer/8bd17859',}).then((response)=>{console.log(JSON.stringify(response.data))let _data = response.data;let datalength = _data.length;for(let i = 0;i < datalength; i++){this.$set(_data[i], 'editing', false)}//赋值this.modifyData = _data;}).catch(function(err){console.log(err)})},handleEdit(index,row){row.editing = true;console.log(index)this.prevValue = JSON.parse(JSON.stringify(row));},handleCancle(index,row){row.editing = false;let prevContent = this.prevValue.bookname;this.$set(row,"bookname",prevContent);},savemodify(){console.log(JSON.stringify(this.modifyData))}}}本地的1.1.1.JSON数据[{"bookname":"普通⾼等教育物联⽹⼯程专业规划⽤书:物联⽹技术概论","bookbuytime": "2016-05-04","bookbuyer": "李晓⽉","bookborrower": "王⼩虎","bookvolume":"1"},{"bookname":"区块链⾰命:⽐特币底层技术如何改变货币、商业和世界","bookbuytime": "2016-05-04","bookbuyer": "李晓⽉","bookborrower": "李⼩虎","bookvolume":"1"},{"bookname":"⼤家⼀起学配⾊:数学⾊彩设计全能书","bookbuytime": "2017-12-04","bookbuyer": "张晓⽉","bookborrower": "王⽽虎","bookvolume":"1"}]如果不⽤get本地数据,vuejs如下export default {name:'TestWorld',data() {return {modifyData:[{bookname: '普通⾼等教育物联⽹⼯程专业规划⽤书:物联⽹技术概论',bookbuytime: '2016-05-04',bookbuyer: '李晓⽉',bookborrower: '王⼩虎',bookvolume: '1',editing: false},{bookname: '区块链⾰命:⽐特币底层技术如何改变货币、商业和世界',bookbuytime: '2016-05-04',bookbuyer: '李晓⽉',bookborrower: '李⼩虎',bookvolume: '1',editing: false},{bookname: '⼤家⼀起学配⾊:数学⾊彩设计全能书',bookbuytime: '2017-12-04',bookbuyer: '张晓⽉',bookborrower: '王⽽虎',bookvolume: '1',editing: false}],prevValue:{}}},methods:{handleEdit(index,row){ //编辑row.editing = true;console.log(index)this.prevValue = JSON.parse(JSON.stringify(row));},handleCancle(index,row){ //取消row.editing = false;let prevContent = this.prevValue.bookname;this.$set(row,"bookname",prevContent);},savemodify(){console.log(JSON.stringify(this.modifyData))}}}运⾏图3.批量删除⾏数<template><div class="TestWorld"><el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column><el-table-column label="⽇期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="batchDelete">批量删除</el-button><el-button @click="toggleSelection()">取消选择</el-button></div></div></template>vuejs 代码export default {name:'TestWorld',data() {return {tableData3: [{date: '2016-05-03',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-02',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-04',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-01',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-08',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-06',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'},{date: '2016-05-07',name: '王⼩虎',address: '上海市普陀区⾦沙江路 1518 弄'}],multipleSelection: []}},methods:{toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},batchDelete(){let multData = this.multipleSelection;let tableData =this.tableData3;let multDataLen = multData.length;let tableDataLen = tableData.length;for(let i = 0; i < multDataLen ;i++){for(let y=0;y < tableDataLen;y++){if(JSON.stringify(tableData[y]) == JSON.stringify(multData[i])){ //判断是否相等,相等就删除this.tableData3.splice(y,1)console.log("aa")}}}},handleSelectionChange(val) {this.multipleSelection = val;}}}有关验证的代码,看上⾯,持续更新~以上这篇vuejs element table 表格添加⾏,修改,单独删除⾏,批量删除⾏操作就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
js实现添加删除表格操作
js实现添加删除表格操作本⽂实例为⼤家分享了js实现添加删除表格的具体代码,供⼤家参考,具体内容如下效果:1、点击添加按钮往table中添加⼀⾏将全选前⾯的复选框变成false1.1.当前新增的复选框加上点击事件2、点击删除按钮获取表格体中被选中的⾏, 删除整个tr, 将全选前⾯的复选框变成false获取的是第⼀个td中的checkbox的状态 checked为true 2层⽗⼦3 、点击全选按钮前⾯的复选框如果被选中下⾯的每⼀个复选框都被选中如果不被选中下⾯的每⼀个复选框都不被选中4、点击每⼀个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有⼀个没有被选中, 全选按钮就是不选中状态css:<style>.head {width: 500px;padding: 8px;margin: 20px auto;box-sizing: border-box;border: 1px solid #eee;}input {margin-left: 3px;outline: none;}button {float: right;}table {width: 500px;border: 1px solid #000;margin: 0 auto;border-collapse: collapse;}tr,td,th {border: 1px solid #000;}tr td:nth-child(1) {text-align: center;}.foot {width: 500px;margin: 8px auto;padding: 8px;box-sizing: border-box;}.foot button {float: right;}td:nth-child(2),td:nth-child(3),td:nth-child(4) {width: 20%;}</style>html:<div class="head"><span>请输⼊姓名 :</span><input type="text"><br><span>请输⼊性别 :</span><input type="radio" name="sex" checked>男<input type="radio" name="sex">⼥<br> <span>请输⼊年龄 :</span><input type="text"><button>添加到表格</button></div><table><thead><th><input type="checkbox"> 全选</th><th>姓名</th><th>性别</th><th>年龄</th></thead><tbody><tr class="tr1"><td><input type="checkbox"></td><td>张三</td><td>⼥</td><td>88</td></tr><tr><td><input type="checkbox"></td><td>李四</td><td>男</td><td>18</td></tr><tr><td><input type="checkbox"></td><td>王五</td><td>⼥</td><td>12</td></tr></tbody></table><div class="foot"><button>删除所选⾏</button></div>javascript:// 事件三部曲// 1. 获取元素按钮 table tBody 复选框 inpvar btns = document.querySelectorAll('button');var table = document.querySelector('table');var inps = document.querySelectorAll('input');var all = table.tHead.querySelector('input');var cks = table.tBodies[0].getElementsByTagName('input');var cks1 = table.tBodies[0].querySelectorAll('input');// console.log(btns, table, inps, cks);// console.log(cks, all);console.log(cks, cks1);// 2. 点击添加按钮btns[0].onclick = function(){// 3. 往table中添加⼀⾏var tr = document.createElement('tr');// 4. tr加到tbodytable.tBodies[0].appendChild(tr);// 5. 创建tdvar inp = document.createElement('td');inp.innerHTML = '<input type="checkbox">';tr.appendChild(inp);var user = document.createElement('td');user.innerHTML = inps[0].value;tr.appendChild(user);var sex = document.createElement('td');sex.innerHTML = inps[1].checked ? '男' : '⼥';tr.appendChild(sex);var age = document.createElement('td');age.innerHTML = inps[3].value;tr.appendChild(age);// 6. 全选前⾯的复选框变成falseall.checked = false;// 当前新增的复选框加上点击事件var bck = tr.querySelector('input');console.log(bck);bck.onclick = function(){auto();}}// 7. 点击删除按钮删除所选中的⾏btns[1].onclick = function(){// 8. 获取表格体中被选中的⾏// console.log(cks, cks1);// 9. 判断复选框是否被选中for(var i = 0; i < cks.length; i++){console.log(cks);if(cks[i].checked){// console.log(cks[i].parentNode.parentNode);// console.log(cks);// 10. 删除整⾏cks[i].parentNode.parentNode.remove();i--;}}// 11. 将全选前⾯的复选框变成falseall.checked = false;}// 点击全选按钮前⾯的复选框如果被选中下⾯的每⼀个复选框都被选中如果不被选中下⾯的每⼀个复选框都不被选中// 12. 点击allall.onclick = function(){console.log(all.checked);// 13. 每⼀个for(var i = 0; i < cks.length;i++){cks[i].checked = all.checked;}}// 点击每⼀个表格体中的复选框, 如果所有的复选框都被选中, 全选按钮就是被选中, 如果有⼀个没有被选中, 全选按钮就是不选中状态 for(var j = 0; j < cks.length; j++){// 点击cks[j].onclick = function(){// 所有的// for(var i = 0; i < cks.length; i++){// console.log(cks[i].checked);// // 如果有⼀个没有被选中, 全选按钮就是不选中状态// if(cks[i].checked == false){// // 全选按钮就是不选中// all.checked = false;// // 结束整个函数// return;// }// }// // 所有的都被选中// all.checked = true;auto();}}function auto() {// 所有的for(var i = 0; i < cks.length; i++){console.log(cks[i].checked);// 如果有⼀个没有被选中, 全选按钮就是不选中状态if(cks[i].checked == false){// 全选按钮就是不选中all.checked = false;// 结束整个函数return;}}// 所有的都被选中all.checked = true;}效果:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
js控制table增加行和列
<h e a d> <title></title><scriptlanguage="javascript"type="text/javascript">functionaddRow(){varnewTR=document.getElementById("testTable").insertRow(document.getElem entById("testTable").rows.length);varnewNameTD=newTR.insertCell(0);newNameTD.innerHTML="aa";varnewNameTD=newTR.insertCell(1);newNameTD.innerHTML="<inputname='LastName'id='LastName'type='text'/>"; varnewNameTD=newTR.insertCell(2);newNameTD.innerHTML="<inputname='BirthDay'id='BirthDay'type='text'/>"; varnewNameTD=newTR.insertCell(3);newNameTD.innerHTML="<inputname='age'id='age'type='text'/>";}functioninsertRow(){varoTable=document.getElementById("table_info");varoTr=oTable.insertRow();varoTd=oTr.insertCell();oTd.innerHTML="新添加了一行";}functioninsertRow2(){vartable=document.getElementById("table_info2");//找到要添加button的td,这里以表格第一行第一列为例子varoTd=table.rows[0].cells[0];//添加button到td中,添加前吧td内容清空并赋予button的代码oTd.innerHTML="<buttononclick='insertRow22()'>添加收费</button>"; }functioninsertRow22(){varoTable=document.getElementById("table_info2");varoTr=oTable.insertRow();varoTd=oTr.insertCell();oTd.innerHTML="新添加了一行";}functioninsertRow3(){//获取table对象vartable=document.getElementById("table_info3");//找到要添加button的td,这里以表格第一行第一列为例子varoTd2=table.rows[0].insertCell();oTd2.innerHTML="&nbps;";}functiontableDiv(){varmaxRow=4;varmaxCol=8;varstrTbody=["<tableborder='1'><tbody>"];strTbody.push("<tr>");for(varj=0;j<maxCol;j++){strTbody.push("<td>test</td>");}strTbody.push("</tr>");}strTbody.push("</tbody></table>");varobj=document.getElementById("tableDiv"); obj.innerHTML=strTbody.join("");}functioninit(){var_table,_tbody,tr,td,text,maxRow,maxCol; vardocBody=document.body;var_doc=document;maxRow=5;maxCol=8;_table=_doc.createElement("table");_table.border="1";_tbody=_doc.createElement("tbody");_table.insertBefore(_tbody,null); docBody.insertBefore(_table,null);for(vari=0;i<maxRow;i++){tr=_doc.createElement("tr");for(varj=0;j<maxCol;j++){td=_doc.createElement("td");text=_doc.createTextNode("Text");td.insertBefore(text,null);tr.insertBefore(td,null);}}}</script></head><body><div><tableid="testTable"border='1'cellspacing="1"> <tr><th>FirstName</th><th>LastName</th><th>BirthDay</th></tr> <tr> <td> Jim</td> <td> Green </td> <td> L.A</td> <td> 23</td> </tr> <tr> <td> Andrew </td> <td> Hou</td><td>25</td></tr></table><inputtype="button"id="aaa"value="+addnewRow"onclick="addRow();"/> </div><br/><hr/><br/><div><inputtype="button"value="按钮添加行"onclick="insertRow();"/><tableid="table_info"border="1"><tr><th>Name</th><th>Age</th></table></div><br/><hr/><br/><div><inputtype="button"value="按钮中添加行"onclick="insertRow2();"/> <tableid="table_info2"border="1"><tr><th>Name</th><th>Age</th></tr></table></div><br/><hr/><br/><div><inputtype="button"value="连续添加列"onclick="insertRow3();"/><tr><th>Name</th><th>Age</th></tr></table></div><br/><hr/><br/><div><inputtype="button"value="添加一个table"onclick="tableDiv();"/> <divid="tableDiv"/></div><br/><hr/><br/><div><inputtype="button"value="连续添加table"onclick="init();"/></div>。
js操作表格、table、
js操作表格、table、js添加⼀⾏、删除⼀⾏let str="<tr>"+"<td>"+a[1]+"</td>"+"<td>"+p_money+"</td>"+"<td>"+b_money+"</td>"+"<td ><span onclick=\"delTab('"+a[0]+"',this)\" style=\"color: blue;cursor:pointer;\">删除</span></td>" +"</tr>";$("#tab").append(str);function delTab(id,obj){ids=ids.replace(id+"#", "");var tr=obj.parentNode.parentNode;var tbody=tr.parentNode;tbody.removeChild(tr);}js获取多少⾏多少列以及获取数据//获取表格对象;let tab = document.getElementById("tab");//获取表格所有⾏数;let tablRows = tab.rows.length;let args="";for(let i=1;i<tablRows;i++){for(let j=1;j<tab.rows[i].cells.length-1;j++){args+=tab.rows[i].cells[j].innerText+"#";}args+=",";}根据单元格获取⾏号console.log(obj.parentNode.parentNode.rowIndex);添加、删除、上移、下移案例代码function add(){let pjc=$("#pjc").val();$("#pjc").val("");//获取表格对象;let tab = document.getElementById("mytab");//获取表格所有⾏数;let tablRows = tab.rows.length;if(tablRows>=11){alert("最多只能添加10条");return;}if(pjc){if(tablRows==1){let str="<tr>"+"<td>"+pjc+"</td>"+"<td ><span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span></td>"+"</tr>";$("#mytab").append(str);}else if (tablRows==2) {tab.rows[1].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toBut(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">下移</span>";let str="<tr>"+"<td>"+pjc+"</td>"+"<td ><span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toTop(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">上移</span>"+"</td>"+"</tr>";$("#mytab").append(str);}else {let a= tab.rows[tablRows-1].cells.length-1;tab.rows[tablRows-1].cells[a].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>" +"<span onclick=\"toTop(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">上移</span>"+"<span onclick=\"toBut(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">下移</span>";let str="<tr>"+"<td>"+pjc+"</td>"+"<td ><span onclick=\"delTab(this)\" Opstyle=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toTop(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">上移</span>"+"</td>"+"</tr>";$("#mytab").append(str);}}}function toTop(obj) {//获取表格对象;let tab = document.getElementById("mytab");let rows= obj.parentNode.parentNode.rowIndex;let rows2=rows-1;let html1=tab.rows[rows].cells[0].innerHTML;let html2=tab.rows[rows2].cells[0].innerHTML;tab.rows[rows].cells[0].innerHTML=html2;tab.rows[rows2].cells[0].innerHTML=html1;}function toBut(obj) {//获取表格对象;let tab = document.getElementById("mytab");let rows= obj.parentNode.parentNode.rowIndex;let rows2=rows+1;let html1=tab.rows[rows].cells[0].innerHTML;let html2=tab.rows[rows2].cells[0].innerHTML;tab.rows[rows].cells[0].innerHTML=html2;tab.rows[rows2].cells[0].innerHTML=html1;}function delTab(obj){//获取表格对象;let tab = document.getElementById("mytab");//获取表格所有⾏数;let tablRows = tab.rows.length;var tr=obj.parentNode.parentNode;let rows= obj.parentNode.parentNode.rowIndex;var tbody=tr.parentNode;tbody.removeChild(tr);if(tablRows==3){tab.rows[1].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>";}else if(tablRows==4){if(rows+1==4){tab.rows[2].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toTop(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">上移</span>";}else if(rows==1){tab.rows[1].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toBut(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">下移</span>";}}else if(tablRows>=4){if(rows+1==tabRows){tab.rows[rows-1].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>" +"<span onclick=\"toTop(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">上移</span>";}else if(rows==1){tab.rows[1].cells[1].innerHTML="<span onclick=\"delTab(this)\" style=\"color: blue;cursor:pointer;\">删除</span>"+"<span onclick=\"toBut(this)\" style=\"color: blue;cursor:pointer;margin-left: 10px;\">下移</span>";}}}。
js动态添加表格逐行添加、删除、遍历取值的实例代码
js动态添加表格逐⾏添加、删除、遍历取值的实例代码关于js对表格进⾏逐⾏添加,今天抽空整理了⼀下:新建⼀个html⽂件(没有编辑器的可以新建⼀个demo.txt⽂件,然后改后缀名为demo.html),把下⾯代码全部贴进去即可。
功能包括:表格添加⼀⾏,表格删除⼀⾏,表格遍历取值等。
点击说明:点击添加按钮,则表格添加⼀⾏,可进⾏录⼊,删除按钮,可删除当前⾏,其他⾏不影响。
删除或者添加,每⾏的的编号都会⾃动变化,套餐和价格是<input/>,内容是<textarea></textarea>,点击保存按钮的时候,遍历表格中所有⾏,把所有⾏的数据取出来弹框弹出展⽰,后期可根据需求传递到后台进⾏处理。
效果图:源代码:<!--Creator: WangPengCreateTime : 2018-01-25去年今⽇此门中,⼈⾯桃花相映红。
⼈⾯不知何处去,桃花依旧笑春风。
--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动态增加表格</title></head><style>td /*设置表格⽂字左右和上下居中对齐*/{vertical-align: middle;text-align: center;padding: 9px;}textarea{min-height: 60px;min-width: 200px;}</style><script type="text/javascript">function del(obj){if(document.getElementById('tbodyid').children.length>1){var trid=obj.parentNode.parentNode.id;var objtr=document.getElementById(trid);document.getElementById('tbodyid').removeChild(objtr);var tbody=document.getElementById('tbodyid');var countchildren=tbody.childElementCount;for (var i=0;i<countchildren;i++){tbody.children[i].children[0].innerHTML=i+1;}}else{alert("请不要全部删除");}}function add(){var trid = new Date().getTime();var packageid=trid+'packageid';var countid=trid+'countid';var priceid=trid+'priceid';var objtr=document.createElement('tr');objtr.id=trid;objtr.innerHTML="<td></td> " +" <td><input id='"+trid+"packageid'></td> " +" <td><textarea id='"+trid+"countid'></textarea></td> " +" <td><input id='"+trid+"priceid'></td> " +" <td><button type='button' onclick='del(this)'>删除</button></td>";document.getElementById("tbodyid").appendChild(objtr);var tbodyobj=document.getElementById('tbodyid');var countchildren=tbodyobj.childElementCount;for (var i=0;i<countchildren;i++){tbodyobj.children[i].children[0].innerHTML=i+1;}}function save(){var tbodyobj=document.getElementById('tbodyid');var countchildren=tbodyobj.childElementCount;var trid="";var packageid="";var countid="";var priceid="";var list=new Array();for (var i=0;i<countchildren;i++){trid=tbodyobj.children[i].id;packageid=trid+"packageid";countid=trid+"countid";priceid=trid+"priceid";var map={"套餐":document.getElementById(packageid).value,"内容":document.getElementById(countid).value,"价格":document.getElementById(priceid).value}list.push(map);}console.log("list:",list);alert(JSON.stringify(list));}</script><body><div><div style="width: 80%;margin: 10%"><table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%"><caption>动态增加表格</caption><thead><tr><th width="5% ">序号</th><th width="20%">套餐</th><th width="30%">内容</th><th width="10%">价格</th><th width="10%">操作</th></tr></thead><tbody id="tbodyid"><tr id="123"><td>1</td><td><input id="123packageid"></td><td><textarea id="123countid"></textarea></td><td><input id="123priceid"></td><td><button type="button" onclick='del(this)'>删除</button></td></tr></tbody></table><button type="button" onclick='add()'>添加</button><button type="button" onclick='save()'>保存</button></div></div></body></html>js动态⽣成其他的也同理,可根据⾃⼰需要在指定位置创建⾃⼰所需要的元素。
JSexample点击旋钮table增加一行删除一行
JS example点击旋钮table增加一行删除一行c_a_3();JS example:点击按钮table增加一行,删除一行点击添加按钮给table增加一行,有两种方法,一种是通过js控制添加;另一种就是直接用html元素和innerHTML,在这里我主要是说的用js来控制,因为这种易于调整。
在这里要了解的这几个知识点, appendChild, firstChild, cloneNode(false or true),chidNodes, childNodes[i], style = display:none , innerHTML ,toString(),typeof.nowrap,size(input框显示大小),maxlength(input框输入大小) 思路:1 显示table2 模板table(隐藏style= display:none )3 点击添加按钮触发事件将模板table的一行添加到显示table中去(table1.firstChild.appendChild(table2.firstChild.firstChild.cloneNod e(true)))例子:script//给table增加一行function addTableRow() {var table1 = document.getElementById('table1');var cloneTab = document.getElementById('table2');//alert(cloneTab.firstChild.firstChild.innerHTML);//alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNo de(true));var v= table1.firstChild.childNodes;var len = v.length;for(var i=1;i len;i++){v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值}}//给table删除一行function delTableRow(){var table1 = document.getElementById('table1');var isChecked = document.getElementsByName('isChecked');var len = isChecked.length;for(var i=len-1;i =0;i--){if(isChecked[i].checked==true){table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);//alert(isChecked[i].id);//alert(isChecked[i].parentNode.parentNode.innerHTML);}}}/script《!--显示table--table border= 0 cellpadding= 0 cellspacing= 0 class= datalist id= table1trth width= 38 nowrap= nowrap style= width: 5% 0 /thth width= 38 nowrap= nowrap 00 /thth width= 79 nowrap= nowrap scope= col 1 /thth width= 70 nowrap= nowrap scope= col 2 /thth width= 69 nowrap= nowrap scope= col 3 /thth width= 66 nowrap= nowrap scope= col 4 /thth width= 94 nowrap= nowrap scope= col 5 /thth width= 107 nowrap= nowrap scope= col 6 /th/tr/table!--控制table的按钮--tabletr align= centertd colspan= 10input type= button value= 增加 onclick= addTableRow(); /input type= button value= 删除 onclick= delTableRow(); //td/tr/table!--模板table也叫做clone table style = display:none --table id='table2' style= display: nonetrth input type= checkbox name= isChecked / input type= hidden size= 6 value= / /thth width= 38 nowrap= nowrap style= width: 5% input type= text size= 16 maxlength= 50 value= / /thth width= 79 nowrap= nowrap scope= col input type= text size= 16 maxlength= 50 value= / /thth width= 70 nowrap= nowrap scope= col input type= text size= 6 maxlength= 10 value= / /thth width= 69 nowrap= nowrap scope= colselect size= 1option value= 请选择... /optionoption value= 1 1 /optionoption value= 2 1 /option/select/thtd width= 100 nowrap= nowrap scope= col input type= text class=date150 / /tdth width= 94 nowrap= nowrap scope= col input type= text size= 16 maxlength= 50 value= / /thth width= 71 nowrap= nowrap scope= col input type= text size= 16 maxlength= 50 value= / /th/tr/table。
利用js动态添加删除table行的示例代码
利⽤js动态添加删除table⾏的⽰例代码如下所⽰:复制代码代码如下:function addRow(){var table = document.getElementById("tableID");var newRow = table.insertRow(); //创建新⾏var newCell1 = newRow.insertCell(); //创建新单元格newCell.innerHTML = ""; //单元格内的内容newCell.setAttribute("align","center"); //设置位置}function deleteRow(){var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;var styles = document.getElementById("tableID");styles.deleteRow(rowIndex);}<html><head><title></title></head><body><table id="testTbl" border=1><tr><td>产品名称</td><td>产品数量</td><td>产品单价</td></tr><tr><td><select name="a"><option value="电⼦">电⼦</option><option value="电器">电器</option></select></td><td><input type="text" name="b"></td><td><input type="text" name="c"></td></td></table><input type="button" name="Submit2" value="添加" onclick="addRow()"><script>function addRow(){//添加⾏var newTr = testTbl.insertRow();//添加列var newTd0 = newTr.insertCell();var newTd1 = newTr.insertCell();var newTd2 = newTr.insertCell();var newTd3 = newTr.insertCell();//设置列内容和属性newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text; newTd1.innerText = document.all("b").value;newTd2.innerText = document.all("c").value;newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">'; }function del(o){var t=document.getElementById('testTbl');t.deleteRow(o.parentNode.parentNode.rowIndex)}</script></body></html>。
js控制table增加行和列
<head><title></title><script language="javascript" type="text/javascript">function addRow() {var newTR = ("testTable").insertRow("testTable").;var newNameTD = (0);= "aa";var newNameTD = (1);= "<input name='LastName' id='LastName' type='text' />";var newNameTD = (2);= "<input name='BirthDay' id='BirthDay' type='text' />";var newNameTD = (3);= "<input name='age' id='age' type='text' />";}function insertRow() {var oTable = ("table_info");var oTr = ();var oTd = ();= "新添加了一行";}function insertRow2() {ells[0];nsertCell();= "&nbps;";}function tableDiv() {var maxRow = 4;var maxCol = 8;var strTbody = ["<table border='1'><tbody>"];for (var i = 0; i < maxRow; i++) {("<tr>");for (var j = 0; j < maxCol; j++) {("<td>test</td>");}("</tr>");}("</tbody></table>");var obj = ("tableDiv");= ("");}function init() {var _table, _tbody, tr, td, text, maxRow, maxCol;var docBody = ;var _doc = document;maxRow = 5;maxCol = 8;_table = ("table");= "1";_tbody = ("tbody");(_tbody, null);(_table, null);for (var i = 0; i < maxRow; i++) {tr = ("tr");(tr, null);for (var j = 0; j < maxCol; j++) { td = ("td");text = ("Text");(text, null);(td, null);}}}</script></head><body><div><table id="testTable" border='1' cellspacing="1"> <tr><th>FirstName</th><th>LastName</th><th>BirthDay</th><th>age</th></tr><tr><td>Jim</td><td>Green </td><td></td><td>23</td></tr><tr><td>Andrew </td><td>Hou</td><td>Xi'an </td><td>25</td></tr></table><input type="button" id="aaa" value="+add new Row" onclick="addRow();" /></div><br /><hr /><br /><div><input type="button" value="按钮添加行" onclick="insertRow();" /><table id="table_info" border="1"><tr><th>Name</th><th>Age</th></tr></table></div><br /><hr /><br /><div><input type="button" value="按钮中添加行" onclick="insertRow2();" /><table id="table_info2" border="1"><tr><th>Name</th><th>Age</th></tr></table></div><br /><hr /><br /><div><input type="button" value="连续添加列"onclick="insertRow3();" /><table id="table_info3" border="1"><tr><th>Name</th><th>Age</th></tr></table></div><br /><hr /><br /><div><input type="button" value="添加一个table" onclick="tableDiv();" /><div id="tableDiv" /></div><br /><hr /><br /><div><input type="button" value="连续添加table" onclick="init();" /></div></body>。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
function doTableRowDelete(){
var tablObj = arguments[0];
var trIndexs = arguments[1];
var tdCount = arguments[2]==undefined?1:parseFloat(arguments[2]);
/**
* 根据Span外最临近的TD的宽度计算重置当前Span的宽度
*
* obj 可以是页面上一个容器对象,TR、TD、TABLE,此项为空,则会遍历页面上所有的Span对象
*/
function calculateSpanWidth(){
【一】、 cloneStyle 说明:将模板单元格的样式COPY到目标单元格上,模板单元格,要修正样式的单元格
新增行、列 ******
【一】、 insertTableRow 说明:新增行,表格对象,添加行的内容的数组(可选参数,每个单元格的colSpan的数组参数,默认取前一行的属性; 添加到的行的行号,默认是最后一行)
}else{
spanObjs = document.getElementsByTagName('span');
}
for(var i=0;i<spanObjs.length;i++){
var tdObj = spanObjs[i].parentNode;
var obj = arguments[0];
var spanObjs;
if(obj!=undefined){
spanObjs = obj.getElementsByTagName('span');
}
tableObj.d{
var delIndexArr = trIndexs.split(",");
for(var i=delIndexArr.length-1;i>-1;i--){
【三】、 calculateSpanWidth 说明:计算Span的宽度,根据当前span外的单元格的宽度,(可选参数:容器对象,容器对象为空时,取当前document,即遍历页面上所有的Span对象)
*******************************************************************************************************************************************
if(trIndexs==undefined){
tdCount = tdCount-1;
var tdObj = event.srcElement;
var trObj,tableObj;
表格行、列删除
【一】、 doTableRowDelete 说明:默认根据当前事件指向的对象,向上寻找TR,进行删除(可选参数:表格对象;删除的行的行号,按升序方式以逗号分割,如2,3,5;向上遍历TD几次,默认为1次)
合并表格 ******
【一】、 conbainTableRow 说明:纵向单元格的内容相同的合并,传入表格对象,需要合并的列,(可选的参数,从第几行开始);
}
}
var trObj = tdObj.parentNode;
var tableObj = trObj.parentNode;
var cellIndex = tdObj.cellIndex;
tablObj.deleteRow(delIndexArr[i]);
}
}
isDeleteFlag = true;
return isDeleteFlag;
}
while(tdObj.tagName!='TD'&&typeof(tdObj)=='Object'){
tdObj = tdObj.parentNode;
*/
function doTableColDelete(){
var isDeleteFlag = false;
var tdCount = arguments[0]==undefined?1:parseFloat(arguments[0]);
/**
* 删除表格的列
*
* tdCount 根据当前event事件向上追溯TD对象几次,默认为1次
*
* 说明:event事件需要附着在将要删除的TD内部,且不能有多重TD的嵌套;否则需要指定嵌套几层TD对象
/************ TableTool.js ******************************************************************************************************************
************************************************************** 快速索引 ***************************************************************
}
trObj = tdObj.parentNode;
tableObj = trObj.parentNode;
if(tableObj.tagName != 'TABLE'){
var tdObj = event.srcElement;
while(tdCount!=0){
tdCount--;
while(tdObj.tagName != 'TD'){
tdObj = tdObj.parentNode;
***********************************************************************************************************************************************/
}
tdObj = tdObj.parentNode;
}
while(tdObj.tagName != 'TD'){
tdObj = tdObj.parentNode;
【二】、 insertTableCol 说明:新增列,表格对象,添加行的内容的数组(可选参数,每个单元格的rowSpan的数组参数,默认取前一列的属性;添加到的列的列号,默认是最后一列)
获取表格中一行的元素 ******
【一】、 doGetRowObj 说明: 获取表格中行内的元素 ,表格对象,行号,(可选参数,是否copy对象,默认为false;是否获取单元格对象,默认false)
var rowIndex = trObj.rowIndex;
tableObj.deleteRow(rowIndex);
isDeleteFlag = true;
return isDeleteFlag;
}
其他验证与参数获取 ******
【一】、 doFetchBaseCols 说明:获取列号在表格内行中的实际位置,表格对象,列号;返回一个数组,记录每行中指定的单元格的cellIndex
【二】、 doFetchEffectCells 说明:获取插入当前行,被影响到rowSpan属性的单元格集合
while(tdCount > 0){
tdCount--;
while(tdObj.tagName != 'TD'){
tdObj = tdObj.parentNode;
【二】、 combineCell 说明:横向单元格合并,传入单元格内一对象,(可选的参数,合并几个单元格<向右>;是否保留原单元格的值);
单元格与行的移动 ******
【一】、 moveUp 说明:进行上移,(可选参数,最上移动到第几行,默认为第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)
/**
* 删除表格的行
*
* tdCount 根据当前event事件向上追溯TD对象几次,默认为1次
*
* 说明:event事件需要附着在将要删除的TD内部,且不能有多重TD的嵌套;否则需要指定嵌套几层TD对象
var effectCells = doFetchEffectCells(tableObj,rowIndex);
for(var i=0;i<effectCells.length;i++){
effectCells[i].rowSpan = effectCells[i].rowSpan - 1;
tableObj = tableObj.parentNode;
}
var cellIndex = tdObj.cellIndex;
var rowIndex = trObj.rowIndex;
【二】、 moveDown 说明:进行下移,(可选参数,最低移动到倒数第几行,默认为倒数第零行;需要移动的行或者td对象或者td内的子对象,默认获取当前事件指向的行)
【三】、 moveCell 说明:行交换,表格对象、交换的行的行号
赋值单元格样式 ******