JS操作表格

最新推荐文章于 2021-11-30 21:04:59 发布
最新推荐文章于 2021-11-30 21:04:59 发布
阅读量236 收藏
点赞数
分类专栏： 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 473
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
javascrip 动态添加行
回首如梦
07-22 157
[code="java"] 增加Table行 function addRow(obj) { //添加一行 var newTr = testTbl.insertRow(); //添加两列 var newTd0 = n...
js动态添加行和删除行
08-24
js动态添加行和删除行
table 使用js 高效 动态添加行
04-16
使用js动态添加行，简单而方便，所以操作table。
js生成行，刪除行，復制行
hhr-michael
09-07 73
无标题文档 Item Item No Nickname Cleats / Flat Upper / Out Size Qty Net Price Actual Price Amount Price Ac...
javascript操作表格
12-09
在实际开发中，JavaScript操作表格通常涉及到DOM（Document Object Model）操作，例如`document.getElementById()`、`innerHTML`属性、`appendChild()`、`removeChild()`等方法。此外，为了提供更好的用户体验，可能...
js简单表格操作
07-15
在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...
Javascript 表格操作实现代码
10-29
Javascript 表格操作实现代码 Javascript 是一种广泛应用于 Web 开发的脚本语言，它可以用来实现网页的交互效果和动态更新。在本文中，我们将通过实例代码来介绍如何使用 Javascript 实现表格操作，包括获取表格值...
js操作表格
12-18
js操作表格 实例 js操作表格 实例 js操作表格 实例
javascript操作表格.doc
06-09
以下是关于JavaScript操作表格的一些关键知识点： 1. **DOM操作**：JavaScript通过Document Object Model (DOM)来访问和修改HTML元素。在这个例子中，`document.getElementById`函数用于获取页面上的元素，如按钮和...
js创建表格动态增加行并删除行
starrysky的专栏
07-01 736
http://www.w3.org/TR/html4/strict.dtd">        添加用户               添加用户:    姓名:       email:       电话:    提交                                  姓名       email
js的节点操作动态创建table表格，创建行，删除行
paidaboluo的博客
11-30 1742
节点操作 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点 总的来说只要是在窗口内的都是节点，都可以通过DOM操作 insertBefore() 方法可在已有的子节点前插入一个新的子节点。 node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是
表格动态增加行(JS)
weixin_30426879的博客
07-17 2070
我最近一直在学Javascript,因为在项目用的比较多，虽然现在大家都在说Web标准，实际上还没有一个严格的定义，我理解的Web标准是把结构、表现、行为这三者结合表现出来就OK了。那用什么来表现呢？当然是CSS样式，行为用什么来控制呢？就是Javascript,可想而知学习Javascript的重要性了，当然除了Javascript，还有Vbscript,不过本人比较倾向Javascript ...
js动态添加行
weixin_34367257的博客
06-15 922
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> select { width: 200px; } </styl...
你会用JS动态给html添加空格吗？我教你~
FruitHardCandy的专栏
06-19 1923
前端项目中有时需要动态用JS添加空格，例如为了照顾CSS的样式或者为了照顾特殊效果的实现。只要用下面这种方法就好了。 HTML: &lt;div id="test"&gt;&lt;/div&gt; 如果你不单单想让div之间是null，而是想动态添加空格的话，这样(jquery): $("#id").innerHTML +...
浅谈js中如何动态添加表头/表列/表格内容
sxs161028的博客
07-04 8043
浅谈js中如何动态添加表头/表列/表格内容我想很多童鞋用js动态向表格中添加数据很熟悉，而且也觉得非常简单！是的，对于写页面的童鞋来说，最喜欢写查询的页面了，动态向表格绑定数据。用for循环就可以轻松搞定。 如果我们的业务需求有所变化，可能我们要的数据就不是这样一条一条的中规中矩的。如果你还是新手，又没有人教你，在网上又搜不到方法，可以告诉你一个简便的方法，那就是让后台写服务的同事在后台把数
js动态给表格添加一行、删除一行
rmkloveme
10-30 1万+
最近写代码遇到这个需求，特地总结了一下写了个demo，如下所示： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;new document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g
js 字符串中添加空格
热门推荐
林逗哥
11-23 5万+
  直接在字符串后面拼接 &amp;nbsp即可,如图：    
js操作表格的方法介绍
最新发布
09-24
### 回答1： JavaScript可以通过以下方法操作表格： 1. 获取表格元素 可以通过`document.getElementById()`或`document.getElementsByTagName()`来获取表格元素。例如： ```javascript var table = document.getElementById("myTable"); ``` 2. 获取表格行和单元格 可以使用`table.rows`来获取表格中的所有行，然后使用`row.cells`来获取行中的所有单元格。例如： ```javascript var table = document.getElementById("myTable"); var rows = table.rows; for (var i = 0; i < rows.length; i++) { var cells = rows[i].cells; for (var j = 0; j < cells.length; j++) { var cell = cells[j]; // do something with the cell } } ``` 3. 创建表格行和单元格 可以使用`table.insertRow()`方法来创建表格行，使用`row.insertCell()`方法来创建单元格。例如： ```javascript var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "Hello"; cell2.innerHTML = "World"; ``` 4. 删除表格行和单元格 可以使用`row.parentNode.removeChild(row)`方法来删除表格行，使用`cell.parentNode.removeChild(cell)`方法来删除单元格。例如： ```javascript var table = document.getElementById("myTable"); var row = table.rows[0]; var cell = row.cells[0]; row.parentNode.removeChild(row); cell.parentNode.removeChild(cell); ``` 5. 修改表格样式 可以使用`element.style`属性来修改表格的CSS样式。例如： ```javascript var table = document.getElementById("myTable"); table.style.border = "1px solid black"; ``` 6. 获取和设置表格内容 可以使用`cell.innerHTML`属性来获取和设置单元格的内容。例如： ```javascript var table = document.getElementById("myTable"); var cell = table.rows[0].cells[0]; var content = cell.innerHTML; cell.innerHTML = "New Content"; ``` ### 回答2： 在JavaScript中，可以使用多种方法来操作表格。 首先，我们可以通过getElementById（）方法来获取表格的引用。这个方法可以用来获取HTML文档中具有指定id的元素，对于表格，我们可以给表格添加一个id，并使用这个方法来获取它的引用。 然后，我们可以使用表格引用的属性和方法来进行各种操作。例如，可以使用rows属性来获取表格中的行数，并使用insertRow（）方法添加新行或使用deleteRow（）方法删除行。可以使用cols属性来获取表格中的列数，并使用insertCell（）方法添加新单元格或使用deleteCell（）方法删除单元格。 此外，我们还可以通过使用innerHTML属性来修改表格的内容。可以将HTML代码赋值给一个具体的表格单元格，以更新该单元格的内容。例如，可以使用document.getElementById（'tableId'）。rows [i] .cells [j] .innerHTML = '新内容'来将新内容赋值给具体的单元格。 另外，还有一些其他的方法可以对表格进行更高级的操作。例如，可以使用setAttribute（）方法来添加或修改表格的属性，例如设置表格的边框样式或宽度。还可以使用addEventListener（）方法来添加事件监听器，以便在表格上执行特定操作，例如单击表格行时触发某个函数。 总结起来，通过使用getElementById（）方法获取表格引用，然后使用表格的属性和方法，如rows，cols，insertRow（），insertCell（），innerHTML等，可以实现对表格的各种操作和修改。通过这些方法，我们可以动态地创建、修改和删除表格的行和单元格，并且可以根据需要更新表格的内容和样式。 ### 回答3： JavaScript操作表格的方法有很多种，以下是几种常用的方法介绍： 1. 通过DOM方法操作表格：使用getElementById、getElementsByTagName等DOM方法获取表格对象，然后通过操作表格的属性和方法来实现对表格的操作，如设置表格的行数、列数，获取表格的指定单元格等。 2. 使用innerHTML属性动态生成表格：通过在JavaScript中拼接HTML字符串，然后通过设置表格的innerHTML属性将生成的HTML代码插入到指定位置，实现动态生成表格的效果。这种方法可以实现动态添加、删除、修改表格中的行、列和单元格。 3. 使用insertRow和insertCell方法插入新行和新单元格：通过使用表格对象的insertRow和insertCell方法，可以在指定位置动态地插入新的行和单元格。可以通过设置单元格的innerHTML属性来插入文本内容或其他HTML元素。 4. 使用deleteRow和deleteCell方法删除行和单元格：通过表格对象的deleteRow和deleteCell方法，可以在指定位置删除对应的行和单元格。 5. 使用setAttribute和getAttribute方法修改和获取表格的属性：通过使用表格对象的setAttribute和getAttribute方法，可以修改和获取表格的属性，如设置表格的宽度、高度、边框样式等。 总结来说，JavaScript操作表格的方法主要包括通过DOM方法操作表格、使用innerHTML属性动态生成表格、使用insertRow和insertCell方法插入新行和新单元格、使用deleteRow和deleteCell方法删除行和单元格，以及使用setAttribute和getAttribute方法修改和获取表格的属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值