JS操作表格

最新推荐文章于 2024-04-30 22:06:17 发布
最新推荐文章于 2024-04-30 22:06:17 发布
阅读量233 收藏
点赞数
分类专栏： JS等效 文章标签： border function button input class xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title></title>

 <style>
 #tab {
    border:1px solid #aaa;
    border-collapse:collapse;
    width:80%;
 }
  #tab  th{
    border:1px solid #aaaaaa;
    background:#ECE9D8;
    border-collapse:collapse;
    padding:5px;
    text-align:left;
 }
 #tab td{
    border:1px solid #d8d8d8;
    border-collapse:collapse;
    padding:5px;
 }
 .txt{
   border:1px solid #888;
  background:#ECE9D8;
 }
.checkBg{
    border:1px solid #aaaaaa;
    background:#ECE9D8;
}
.checkTxt{
    border:1px solid #aaa;
    background:##d8d8d8;
}
.button {
   border:1px solid #888;margin:5px 0px;
   width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
 </style>
    <script language="javascript" type="text/javascript">

      function $(id) {return document.getElementById(id);}
      function $F(name){return document.getElementsByTagName(name);}

     function add(){
           var otr = document.getElementById("tab").insertRow(-1);
        var checkTd=document.createElement("td");
        checkTd.innerHTML = '<input type="checkbox" class="check" οnclick="ccolor()" name="checkItem">';
        var otd1 = document.createElement("td");
        otd1.innerHTML = '<textarea name="QUESTION_INFO" cols="50" rows="3" id="infoName_txt'+($('tab').rows.length-1)+'"></textarea>';
        var otd2 = document.createElement("td");
        otd2.innerHTML = '<input type="text" class="txt"  name="COMM_SITUS" id="infoValue_txt'+($('tab').rows.length-1)+'"  maxlength="10" size=10 value=""/>';

        otr.appendChild(checkTd);
        otr.appendChild(otd1);
        otr.appendChild(otd2);
     }
     function ccolor()
     {
            var c1 = document.getElementsByName('checkItem');
            for(var i=0; i<c1.length; i++)
            if(c1[i].checked)
            {
                c1[i].parentNode.parentNode.className="checkBg";
                c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
            }
            else     {    c1[i].parentNode.parentNode.className="";
            c1[i].parentNode.nextSibling.firstChild.className="";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
     }
     function del(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var i=0; i<c.length; i++)
        if(c[i].checked)
        idArray.push(i);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1-nextDiff++;
          document.getElementById("tab").deleteRow(rowIndex);
        }
      }
    function save(){
            var postString = $("postString");
           var checkboxs =  document.getElementsByName("checkItem");
           var ttab = document.getElementsByName("QUESTION_INFO");
           var tt2 = document.getElementsByName("COMM_SITUS");
        
           var idArray = new Array();
           for(i=0;i<checkboxs.length;i++)
            {
                idArray.push(ttab[i].value + "|" + tt2[i].value);
            }
        
           postString.value = idArray.join("-");
           alert(postString.value);
    }  

      function alldell()
      {
         var des =document.getElementsByName('checkItem');
         for(var i=0;i<des.length;i++)
         {
            if(des[i].checked=document.getElementById('delall').checked){
            des[i].parentNode.parentNode.className="checkBg";
            des[i].parentNode.nextSibling.firstChild.className="checkTxt";
            des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
            else{ des[i].parentNode.parentNode.className="";
                des[i].parentNode.nextSibling.firstChild.className="";
                des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
         }
      }
</script>
</head>

<body>
<input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();"  value="新增" />
<input name="del_btn" id="del_btn" type="button" class="button" onClick="del();"  value="删除所选" />
<input name="save" id="save" type="button" class="button" onClick="save();"  value="save" /><br>

<table  id="tab" >
<tr>
<th width="5%"><input type="checkbox"  id="delall" οnclick="alldell()"></td>
<th width="50%">步骤描述</td>
 
<th width="25%">地点
  </td></tr>
</table>
<p>
<input type="text" name="postString" id="postString">
</p>
</body>
</html>

hanxcloveyou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态添加行
s853562285的专栏
08-22 471
function id(id) { return document.getElementById(id); } var count = 1; function addRow(){ var tableObj = id("testTable"); var rowObj = tableObj.insertRow(-1); rowObj.setAttribute("id","newRow"); v
js如何操作表格
codeFH的博客
01-16 2175
js如何操作表格（常用属性方法汇总） 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组。 语法：tableObject.cells[] rows[] 返回包含表格中所有行的一个数组。 rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。 tBodies[] 返回包含表格中所有 tbody 的一个数组。 注：不...
js动态添加行和删除行
08-24
js动态添加行和删除行
javascrip 动态添加行
回首如梦
07-22 156
[code="java"] 增加Table行 function addRow(obj) { //添加一行 var newTr = testTbl.insertRow(); //添加两列 var newTd0 = n...
table 使用js 高效 动态添加行
04-16
使用js动态添加行，简单而方便，所以操作table。
js生成行，刪除行，復制行
hhr-michael
09-07 69
无标题文档 Item Item No Nickname Cleats / Flat Upper / Out Size Qty Net Price Actual Price Amount Price Ac...
js操作表格相关
Alienkp的博客
05-05 691
js对表格操作(增删查)提供了一些非常好用的方法 使用之前需要先获取表格的节点例如: var tab = document.querySelector("table"); 对表格添加元素 var 新添加的行=表格节点.insertRow();添加行 新添加的行.insertCell(); 行里添加列 对表格删除元素 表格元素.deleteRow(参数); 删除指定行 参数:tr的索引 需...
JavaScript 动态表格操作
wgchen
04-13 5087
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
js案例：操作表格
bingmo_的博客
10-12 1464
<html> <head> <title>操作表格</title> <meta charset="UTF-8"/> <!-- js操作表格学习: 1、删除行： 行对象.rowIndex//返回行对象的角标 ...
JavaScript操作表格及CSS样式
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-06 1736
概述 在前端开发中，表格主要用于存储结构化的数据，CSS主要用于修饰DOM元素，如何通过DOM来操作表格及CSS呢？本文主要通过一些简单的小例子，简述DOM对表格和CSS的常见操作方法，仅供学习分享使用，如有不足之处，还请指正。 获取表格及数据 假如当前有一个表格，id为tb01，如下所示： <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2"> <caption>人员表&lt
javascript操作表格
12-09
Power Table body{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } input { FONT-SIZE: 9pt; height: 15pt; width:50px;... background-color:#eeeec
js简单表格操作
07-15
js简单表格操作，对表格进行增删改，效果可看博客： https://blog.csdn.net/qq_37902949/article/details/81056551
js操作表格
12-18
js操作表格 实例 js操作表格 实例 js操作表格 实例
Javascript 表格操作实现代码
10-29
Javascript操作表格 包括获取值，创建表格
简单的js表格操作
11-22
效果图：   任务：  1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff  var tr=document.getElementsByTagName("tr");... // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件...
JS操作表格样式汇总
崔向阳@李晓的博客
09-19 1706
在HTML界面开发中，经常会遇见JS对TABLE表格的操作，下面针对几种经常性的操作进行汇总： 第一：JS动态增加表格行数据 在body中定义一个空的Table <div id="detail" class="sub-title4" align="left"> <table id="tb_cxy"> </ta...
js创建表格动态增加行并删除行
starrysky的专栏
07-01 734
http://www.w3.org/TR/html4/strict.dtd">        添加用户               添加用户:    姓名:       email:       电话:    提交                                  姓名       email
常见的 HTML 标准
csdn_ad986ad的博客
04-30 903
HTML（Hypertext Markup Language）有多个版本和标准。
教育科学规划项目中期检查报告书.docx
最新发布
06-05
教育科学规划项目中期检查报告书.docx
js操作表格的方法介绍
09-24
总结来说，JavaScript操作表格的方法主要包括通过DOM方法操作表格、使用innerHTML属性动态生成表格、使用insertRow和insertCell方法插入新行和新单元格、使用deleteRow和deleteCell方法删除行和单元格，以及使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值