JavaScript 表格操作

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量69 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/HaiLian/p/5779684.html
版权 
<html>
<head>
<style>
.btf{
    height:28px;
    background-color:#F8F0E1;
}
</style>
<script type="text/javascript">
var objTable;
function PageLoad(){
    objTable = document.getElementById( "dataGrid" );//找到操作Table 
}
function copyRow(){
    var objTempRow = objTable.rows[2];//找到Table的模版行 
    var objNewRow = objTable.insertRow( objTable.rows.length );//在Table的末尾新增一行 
    objNewRow.className = "btf";//给表格的添加行样式
    objNewRow.id = objTable.rows.length - 1; 
    //以模版行建立新行内容 
    for ( var i=0 ; i<objTempRow.cells.length ; i++ ){ 
        var objNewCell = objNewRow.insertCell( i ); 
        objNewCell.innerHTML = objTempRow.cells[i].innerHTML; 
    }
}
function deletelastRow(){
    if ( objTable.rows.length -1 > 0 ){
        objTable.deleteRow(objTable.rows.length-1); //删除指定行
    }
}

function deletecheckedRow(){
    if(document.all('idarray').value!='undefined'){
        for(var i=document.all('idarray').length-1;i>-1;i--){
            if(document.all('idarray')[i].checked==true){
                var r=Number(document.getElementById('tb'+document.all('idarray')[i].value).rowIndex);
                objTable.deleteRow(r);
            }
        }
    }
}
function deleteRow(r){
    var i=r.parentNode.parentNode.rowIndex;
    objTable.deleteRow(i);
}
function addRow1(){ 
    var crTR = objTable.insertRow(); //增加一行
    var crTDa = crTR.insertCell();//第一个TD   
    var crTDb = crTR.insertCell();//第二个TD,带rowspan=2   
    crTDb.rowSpan=2;//设成rowspan=2;
    crTDb.colSpan=3;//设成colSpan=3;
    var croTR = objTable.insertRow();//再插入一个TR
    var croTD = croTR.insertCell();//TD,对应上边的rowspan=3的TD   
    //给单元格添加内容
    crTDa.innerHTML="<b>111111</b>这里innerHTML";   
    crTDb.innerHTML="222222跨行跨列：rowspan=2,colSpan=3";   
    croTD.innerText="<b>333333</b>这里innerText"; 
    croTD.width="20px;";//设置单列的宽度
    croTD.height="80px;";//设置单列的高度
    crTR.setAttribute('align','center');//这里通过setAttribute增加表单属性，
}
function addRow2(){
    var crTR = objTable.insertRow();
    var crTDa = crTR.insertCell();
    var crTDb = crTR.insertCell();
    crTDa.rowSpan=2;
    crTDb.colSpan=3;
    croTR = objTable.insertRow();
    var crTDc = croTR.insertCell();
    crTDc.colSpan=3;
    crTDa.innerHTML="111111 rowspan=2";
    crTDb.innerHTML="222222 colSpan=3";
    crTDc.innerHTML="333333 colSpan=3";
}
function mergecells(){
    if(objTable.rows[3].cells[3]==null)return false;//如果已经删除了，那就不允许再操作了
    objTable.rows[3].cells[2].innerHTML=objTable.rows[3].cells[2].innerHTML+objTable.rows[3].cells[3].innerHTML;
    objTable.rows[3].cells[2].colSpan=2;
    objTable.rows[3].deleteCell(3);//删除指定列
    //如果想要拆分单元格，那么1、可以先删除行，再添加新的行。
    //2、可以在当前单元格中增加一个table，其行数和列数就是拆分的行数和列数。
}
function isshowtitlerow(){
    if(document.getElementById("title").style.display=='')document.getElementById("title").style.display ="none";
    else document.getElementById("title").style.display ="";
}
function addtable(){
    var otable=document.createElement("table");//创建一表格
    //设置table的属性
    otable.setAttribute("CELLPADDING","0");
    otable.setAttribute("CELLSPACING","0");
    otable.setAttribute("border","1");
    var otr=otable.insertRow();//创建一空行
    var otd1 = otr.insertCell();//创建一空列
    var otd2 = otr.insertCell();//创建一空列
    otable.width='880';
    otr.className = "btf"; //行添加样式
    otd1.innerHTML = '单元格1'; //空列初始化值
    otd2.innerHTML = '单元格2居中'; //空列初始化值
    //设置列属性
    otd2.style.background="#7596C6";
    otd2.align="center";//等同.setAttribute('align','center');
    document.getElementById('addtable').innerHTML="";
    document.getElementById('addtable').appendChild(otable);//把表格追加到页面的div中
}
window.onload = PageLoad;//初始化获得所要操作的表格句柄
</script>
</head>
<body>
    <table id="dataGrid" border="1" width="880" align="center">
        <tr id="title">
            <th>&nbsp;</th>
            <th>权限组名</th>
            <th>权限组描述</th>
            <th>删除</th>
        </tr>
        <tr id="tb965">
            <td><input type="checkbox" name="idarray" value="965" /></td>
            <td>船舶签证</td>
            <td>船舶签证啊啊</td>
            <td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
        </tr>
        <tr id="tb961">
            <td><input type="checkbox" name="idarray" value="961" /></td>
            <td>拷贝项</td>
            <td>被拷贝</td>
            <td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
        </tr>
        <tr id="tb960">
            <td><input type="checkbox" name="idarray" value="960" /></td>
            <td>违章录入</td>
            <td>违章录入哦</td>
            <td><input type="button" value="删除当前行" onclick="deleteRow(this)"></td>
        </tr>
    </table>
    <div id="addtable">在这里按“增加一个表格”会插入一个表格</div>
    <input type="button" value="删除选中的行" onclick="deletecheckedRow();" />
    <input id="btnInsert" name="btnInsert" type="button" onclick="copyRow()"
        value="拷贝第二行(带样式)" />
    <input id="btnDelete" name="btnDelete" type="button"
        onclick="deletelastRow()" value="删除末行" />
    <input type="button" value="增加一行（用setAttribute增加属性）"
        onclick="addRow1();" />
    <input type="button" value="增加一行(另)" onclick="addRow2();" />
    <input type="button" value="隐藏/显示标题栏" onclick="isshowtitlerow();" />
    <input type="button" value="取table的属性"
        onclick="alert(objTable.getAttribute('id')+':'+objTable.getAttribute('border'));" />
    <input type="button" value="合并第3行的后两列" onclick="mergecells();" />
    <input type="button" value="增加一个表格" onclick="addtable();" />
    <input type="button" value="共有多少行?"
        onclick="alert(objTable.rows.length);" />
</body>
</html>

 

转载于:https://www.cnblogs.com/HaiLian/p/5779684.html

aoxiexian6183
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript 表格操作实现代码
10-29
Javascript操作表格 包括获取值，创建表格
javascript表格操作
02-25
关于javascript 的表格操作的一些函数集合
javascript 动态创建表格：新增、删除行和单元格
sr2012的专栏
11-12 872
利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：index从0开始 这个函数将新行添加到ind
js实现table行合并组件 支持多列、多维、不规则列顺序、指定起始行 RowspanTool.js
oxiaobaio的博客
07-09 1668
当要做一些报表遇到要合并多行的时候。。如果用后端实现表格合并。。代码阅读难度非常大。。如果先用后端将table完整输出，再用js实现合并。。这样逻辑就会简单很多demo: https://github.com/huozhanyi/RowspanTooltable行合并组件-RowspanTool.js * 支持多列、多维、不规则列顺序、指定起始行 * 注意：如果所有列都要进行合并，则注意存在某些行...
javascript表格操作的快捷方法
MIss-Y的博客
03-31 1975
一、表格的组成- 表格式html中最复杂的标签之一，它的层次关系为table>thead/tbody/tfoot>tr>td,我们当然可以根据每一个标签创建一个javascript对象，然后将对象根据这个层次结构添加到父级结构中去，但是这样的操作很麻烦，javascript专门提供了操作表格的相关属性个方法。 二、javascript操作表格的属性和方法 1、元素所对应的属性和方法    
JavaScript 动态表格操作
wgchen
04-13 5095
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
JavaScript实现表格排序
05-20 1455
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。 效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html...
JavaScript操作表格及CSS样式
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-06 1746
概述 在前端开发中，表格主要用于存储结构化的数据，CSS主要用于修饰DOM元素，如何通过DOM来操作表格及CSS呢？本文主要通过一些简单的小例子，简述DOM对表格和CSS的常见操作方法，仅供学习分享使用，如有不足之处，还请指正。 获取表格及数据 假如当前有一个表格，id为tb01，如下所示： <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2"> <caption>人员表&lt
JavaScript实现动态表格
weixin_45757641的博客
01-18 3994
JavaScript实现动态表格 基本效果如下 点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。 代码如下： 第一种方式（较简单，建议使用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格02</title> <style> table{
JavaScript表格常用操作方法汇总
10-24
主要介绍了JavaScript表格常用操作方法,实例汇总了javascript中表格操作的创建、添加、删除、遍历等常用操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript 表格操作
05-28
javascript 表格操作
JavaScript实现动态创建表格
weixin_51688356的博客
02-06 1682
使用JavaScript动态创建表格。
JavaScript动态生成表格
weixin_47304332的博客
04-09 4941
源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
动态网页，设置多个上传文件，innerHTML的妙用 类似的例子
yanleigis的专栏
10-21 753
New Document var theTable,theTableBody;function addNew(form){    var theTable=(document.all)?document.all.t1:document.getElementById("t1");    var theTableBody=theTable.tBodies[0];//tBodies是TBODY对象数组
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 502
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
JavaScript表格操作
05-24
下面是一些常用的表格操作方法： 1. 获取表格对象 可以通过getElementById()或querySelector()等方法获取到表格对象，例如： ```javascript var table = document.getElementById("myTable"); ``` 2. 获取表格的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值