`

js 在指定位置添加/删除tr,td 并设置样式 及 checkbox全选

阅读更多
   经验来自于点点滴滴的实践。

    继续记录,留待后用。

    js:在指定位置添加tr ,td 并设置样式,赋值
  
   jsp中内容:
   <table border=1 id="tab"> 
   </table>

    js 实现:
             var tab =document.getElementById("tab");
          //注:insertRow()分为无参和有参。
            //    其中无参为 insertRow(),默认是插入到指定table的最后。
            //   有参为insertRow(n),插入到指定table的第N行。
           var row =tab.insertRow(0);
           //  创建td
           var cell1 = row.insertCell(0);
           // 设置样式
           cell1.style.cssText="padding:4px";
           cell1.innerHTML=
                      "MAIL帐号<input type='text' id='mail'/>"
           //给td 赋值
           cell1.innerText=""        
           var cell2 = row.insertCell(1);

    js:checkbox全选,全不选,以及根据选中的取值  
     //根据name值获取全部checkbox
     var boxes = document.getElementsByName("xzbm");
     var value = new Array(boxes.length);
     for(var i=0;i<boxes.length;i++){
     //全部取消选中
      if(boxes[i].checked){
         boxes[i].checked =false;
     }
     //全选
     if(!(boxes[i].checked)){
         boxes[i].checked = true;
      }
     //选中取值
      if(boxes[i].checked){
        value[i] = boxes[i].value;
     }
  
    } 
    js:实现删除指定tr

function deleteRow(){
var content=document.getElementById("content");
  var len=content.rows.length;
  for(var i=2;i<len;i++){
    content.deleteRow(2);
  }
  }
删除第二行之后的所有tr


分享到:
评论

相关推荐

    javascript中CheckBox全选终极方案.docx

    本文将详细介绍如何在ASP.NET环境中利用JavaScript实现CheckBox全选功能,并提供完整的示例代码。 #### 关键知识点 ### 1. CheckBox全选原理 在实现CheckBox全选功能之前,我们首先需要理解其实现的基本原理。...

    实现table表格checkbox复选框的全选 反选

    接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...

    gridview checkbox 全选

    通过以上介绍,我们可以看到实现全选功能并不复杂,只需要在前端通过JavaScript进行简单的遍历即可实现对所有复选框状态的控制。而在后端,通过ASP.NET提供的事件处理机制,可以轻松地在服务器端完成全选功能的逻辑...

    利用Bootstrap实现表格复选框checkbox全选

    HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: &lt;tr class=success&gt; 类别编号&lt;/th&gt; 类别名称&lt;/th&gt; 类别组&lt;/th&gt; 状态&lt;/th&gt; 说明&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt; &lt;td&gt;C...

    javascript中CheckBox全选终极方案

    在JavaScript编程中,实现CheckBox全选功能是一项常见的需求,特别是在数据展示或用户交互的场景下,如ASP.NET中的Gridview或Repeater控件。这里我们将深入探讨一种在ASP.NET环境中利用JavaScript实现CheckBox全选和...

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...

    表格的添加,全选,删除

    在这个主题中,我们将深入探讨如何使用JavaScript(JS)来实现HTML表格的添加、全选和删除功能。 一、HTML表格基础 HTML表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`表示表头单元格,`&lt;td&gt;`则表示数据...

    js全选单选集合

    在JavaScript(JS)中,全选和单选是常见的用户交互功能,常见于表格、列表等数据展示场景。用户可能需要一键选择所有选项,或者独立选择单个元素。本篇文章将深入探讨如何实现这些功能,并结合提供的`test.html`...

    微信小程序实现多选框全选与取消全选功能示例

    在微信小程序中,实现多选框(Checkbox)的全选与取消全选功能是一项常见的需求,主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript(JS)、WXML(微信小程序的XML标记语言)和WXSS(微信小程序的CSS...

    Jquery 1.42 checkbox 全选和反选代码

    在网页交互设计中,全选和反选功能是常见的用户操作需求,特别是在处理多选列表时。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果等任务。在这个例子中,我们将详细解析如何使用jQuery...

    js/jQuery实现全选效果

    在网页交互中,全选功能是一项常见的用户操作,特别是在数据表格或者多选项列表中。本文将详细介绍如何使用JavaScript和jQuery两种方法实现全选效果。 **JavaScript实现全选效果** 1. **点击全选按钮实现全选** ...

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    在jQuery中,可以通过遍历表格的行(tr)并根据行的索引(奇偶性)来设置不同的背景颜色。例如: ```javascript $("table tbody tr:even").css("background-color", "#F5F5F5"); $("table tbody tr:odd").css(...

    纯css实现全选效果

    在网页设计中,全选功能是一项常见的需求,特别是在表格或者多行文本输入场景下。纯CSS实现全选效果,能够帮助用户快速选择页面上的所有元素,提高操作效率。本话题将详细探讨如何利用CSS实现这一功能,同时兼顾样式...

    vue.js单选全选删除选中代码.zip

    在给定的压缩包“vue.js单选全选删除选中代码.zip”中,包含的代码示例旨在演示如何在Vue应用中实现单选、全选以及删除选中项的功能。这个功能常见于数据列表管理场景,如表格中的行操作。 首先,Vue.js的核心概念...

    表格中全选按钮的使用以及删除功能的实现

    在页面上添加一个`&lt;input type="checkbox"&gt;`作为全选按钮,当用户点击该按钮时,通过JavaScript遍历所有行中的复选框(假设每个数据行都有一个对应的复选框),并设置它们的状态为选中。例如,你可以添加以下...

    原生JS表格列表全选反选代码.zip

    在JavaScript(JS)编程中,实现表格列表的全选与反选功能是一项常见的需求,尤其在数据展示和用户交互中。这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点...

    【JavaScript源代码】js实现添加删除表格操作.docx

    在JavaScript编程中,实现添加和删除表格操作是常见的任务,特别是在动态交互的网页应用中。以下将详细解析如何使用JavaScript来实现这个功能。 首先,HTML结构是基础,它定义了表格的基本布局。在这个例子中,我们...

    JavaScript全选效果

    这段代码的工作原理是,当`selectAll`复选框的状态改变时,遍历所有具有`itemCheckbox`类的复选框,并将它们的`checked`属性设置为`selectAll`的状态。这样,如果用户选中了全选复选框,所有其他复选框也会被选中;...

Global site tag (gtag.js) - Google Analytics