最近把系统前台页面做点功能优化,好几年没写过js了,头顿时很大,经过一系列狂整,总算给做出来了。
//删除行
function deleteCurrentRow(obj){
if(confirm("确实要删除吗?")) {
var tr=obj.parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr);
}else{
}
}
table 行上移下移
//上移
function moveUp(src)
{
//上移一行
var rowIndex=src.parentElement.parentElement.rowIndex;
if (rowIndex>=2)
change_row(rowIndex-1,rowIndex);
}
function moveDown(src){
//下移一行
var rowIndex=src.parentElement.parentElement.rowIndex;
var tl = document.getElementById("categoryTable");
if (rowIndex<tl.rows.length-1){
change_row(rowIndex+1,rowIndex);
}
}
function change_row(line1,line2)
{
//执行交换
categoryTable.rows[line1].swapNode(categoryTable.rows[line2]);
}
//删除table所有行
function delAllMyRow(){
var mytable = document.getElementById("mybody");
var rowlen=mytable.rows.length;
for(var i=rowlen-1;i>=0;i--){
mytable.deleteRow(i);
}
}
往table 里面插入一行
function selectedChargePackage(value) {
var tab = window.parent.frames.frame1.document.getElementById("categoryTable") ;
//表格行数
var rows = tab.rows.length ;
//添加一行
var newTr =window.parent.frames.frame1.document.getElementById("mybody").insertRow();
//表格列数
// var cells = tab.rows.item(0).cells.length ;
// alert("行数"+rows+"列数"+cells);
//添加四列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML= rows;
newTd1.innerHTML= idValue + tempArray[0] + ",";
newTd2.innerHTML= nameValue + tempArray[1] + ",";
newTd3.innerHTML ="<a href='#' onclick='moveUp(this)' cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>上移</a> " +
"<a href='#' onclick='moveDown(this)' cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>下移</a> " +
"<a href='#' onclick='deleteCurrentRow(this)' cellpadding='3' cellspacing='1' bgcolor='#c7dffc' style='margin-top:5px; margin-bottom:5px;'>删除</a>";
}
获取table 指定行和列的数据
function submitChargePackage() {
var categoryTable = document.getElementById("mybody");
var rows=categoryTable.rows;
// alert("行数:" + rows.length);
for(var i=0;i<rows.length;i++){
// var uu = rows[i].cells.length;
//alert(rows[i].cells[j].innerHTML);
idList = rows[i].cells[1].innerHTML;
nameList = rows[i].cells[2].innerHTML;
chargePackageIdList = chargePackageIdList + idList;
chargePackageNameList = chargePackageNameList + nameList;
}
}
分享到:
相关推荐
以上就是JS操作table的基本方法和常见应用,通过熟练掌握这些技巧,你可以构建出功能丰富的交互式表格。然而,实际开发中可能需要根据具体需求进行更复杂的定制和优化,这就需要开发者具备深厚的JavaScript和DOM操作...
低调发布,因为是小样版本,集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善,引入ajax元素。尽请期待。 demo地址: ...
首先,`js操作table行的上下移动,置顶置底`这个主题涉及到的主要技术是DOM操作,事件监听和数组处理。DOM(Document Object Model)是HTML和XML文档的编程接口,通过JavaScript我们可以对表格中的每一行进行操作。...
js操作table的特效分享
3. **JavaScript操作**:使用JavaScript获取表格数据并创建CSV(逗号分隔值)字符串,这是Excel能识别的一种格式。 ```javascript function exportTableToCSV(filename) { var table = document.getElementById('...
javascript 操作 table的一个例子. 可以下去研究下
### JavaScript操作Table的特性 #### 一、概述 在Web开发中,`<table>`元素是一种常见的HTML结构,用于展示数据。随着JavaScript的发展,我们可以通过脚本来动态地控制表格的行为和外观,从而实现更加丰富的用户...
在JavaScript中,对HTML表格(`<table>`)的操作是一项常见的...在"js操作table.html"文件中,应该包含示例代码和解释,帮助读者更好地理解这些概念。你可以打开这个文件查看具体实现,结合本文的理论知识进行实践。
### JS操作Table的高级技巧 #### 一、删除Table行 在网页设计中,动态地增加或删除表格行是常见的需求。通过`deleteRow()`方法,可以轻松实现这一功能。 ```javascript var infomation = document.getElementById(...
操作table,绑定某行数据到另外页面,例如修改操作,回显数据
js操作HTML增加删除TR/TD (学前班级别的哈!)
在JavaScript(JS)中操作HTML表格...以上就是JavaScript操作HTML表格的基本知识,这些技巧在创建动态网页和Web应用时非常实用。通过熟练掌握这些操作,开发者能够创建出具有丰富交互性和动态性的表格,提高用户体验。
在JavaScript中,操作HTML表格...综上所述,JavaScript操作HTML表格排序涉及数据提取、自定义比较函数、事件监听以及DOM操作等多个方面。理解这些概念并灵活运用,可以帮助我们创建功能强大且用户体验良好的表格应用。
根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`<table>`元素,尤其是对表格的行(`<tr>`)和列(`<td>`或`<th>`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...
对表格的行和列进行插入/删除,并对每行添加行号
#### 二、JavaScript操作Table元素 在网页中,`<table>`元素用于创建表格。JavaScript可以用来动态地创建或修改表格,例如添加或删除行、列等。下面将介绍一些基本的操作方法。 ##### 1. 删除表格的行 ```...
该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
JavaScript操作table的特性主要包括以下几个方面: 1. 动态创建表格: 在JavaScript中,可以通过编程方式动态创建表格。例如,使用`document.createElement("table")`来创建一个新的table元素,然后可以通过一系列...
在JavaScript(JS)中,动态操作表格是一种常见的需求,它涉及到HTML DOM(Document Object Model)的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能,结合给出的标签...