`
j2ee_yohn
  • 浏览: 172224 次
  • 性别: Icon_minigender_1
  • 来自: 湖南/株洲
社区版块
存档分类
最新评论

js根据checkbox选中的动态删除添加行

    博客分类：
  • web
JavaScriptHTML 
阅读更多

<html>
<body>
<table width="200" border="1" id="tb">
  <tr id="r1">
    <td><input type="checkbox" name="ck" value="1"></td>
 <td>abc</td>
  </tr>
</table>
<p>
  <input type="button" onClick="add();" value="add"/>
   <input name="button" type="button" onClick="deletes();" value="delete"/>
</p>
</body>

 

<script language="javascript">
 var tb=document.getElementById("tb");
 var i=2;
    function add()
 {

   var mytr=tb.insertRow();
   mytr.setAttribute("id","r"+i);
   var mytd_1=mytr.insertCell();
  var mytd_2=mytr.insertCell();
  mytd_1.innerHTML="<input type='checkbox' name='ck' value='"+i+"'>";
  mytd_2.innerText="abc"+i;
  i++;
  
 }
 
 function deletes()
 {
   
    var ok=document.getElementsByName("ck");
       for(var k=0;k<ok.length;k++)
    {
            if(ok[k].checked==true)
            {
                tb.deleteRow(k);
                k=k-1;
            }
       }
 }
</script>
</html>

分享到：
| xfire+webservice
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用JS修改checkbox的选中状态

    在JavaScript（JS）中，操作HTML元素，包括修改checkbox（复选框）的选中状态，是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件，其状态通常有两种：选中（checked）和未选中。在本文中...

    通过CheckBox删除选中记录

    "通过CheckBox删除选中记录"这一主题涉及的是前端或后端编程中的一项常见功能，它允许用户通过勾选一系列选项，然后一次性删除这些被选中的数据记录。以下将详细介绍实现这一功能的关键步骤和相关知识点。 1. **复...

    js获得Gridview中选中checkbox行的信息

    当用户勾选这些Checkbox时，我们可以通过JavaScript获取被选中的行的信息。以下是一些关键步骤： 1. **事件绑定**：为GridView中的Checkbox添加点击事件监听器。可以使用`addEventListener`方法来实现，例如： ```...

    CheckBox全选并删除

    - 前端JavaScript：添加一个事件监听器，当全选CheckBox被选中时，遍历其他CheckBox并设置它们的checked属性。 - 后端C#：在服务器端，可以将全选CheckBox的CheckedChanged事件绑定到一个方法，该方法遍历所有子...

    checkbox全选，选中数据传到后台

    在IT行业中，尤其是在Web开发领域，"checkbox全选，选中数据传到后台"是一个常见的功能需求。这个功能主要用于用户批量处理数据，如删除、修改等。以下是对这个主题的详细解析： 首先，我们需要理解标题中的关键词...

    mvc中checkbox的删除

    在这个示例中，当用户点击“删除”按钮时，JavaScript会收集所有选中复选框的值，并通过AJAX发送到服务器。服务器执行删除操作后返回结果，前端可以根据需要更新页面内容。 以上就是使用ASP.NET MVC3和Entity ...

    GridView中选择checkBox的项删除事件

    有时，我们还需要实现对`GridView`中某些特定行进行操作的功能，比如删除选中的记录。本文将详细探讨如何在`GridView`中实现通过选中复选框来触发删除事件的功能。 #### 一、基础概念 在深入讨论代码实现之前，...

    复选框选中表格中的行进行删除行操作

    在IT领域，尤其是在Web开发和用户界面设计中，"复选框选中表格中的行进行删除行操作"是一项常见的功能需求。这个功能主要用于提供用户友好的数据管理方式，让用户能够批量选择并处理表格中的数据。下面我们将详细...

    jstree_checkbox

    "jstree_checkbox"是一个专门用于创建具有复选框功能的权限树结构的JavaScript库。在Web开发中，这样的工具非常实用，特别是在处理用户角色、权限分配或组织结构等需要多级选择和层级关系的场景。它允许用户通过交互...

    今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

    ### JS控制Checkbox全选、取消全选与删除功能 在前端开发中，处理表单数据时经常需要用到对多个复选框（checkbox）的操作，比如全选、取消全选以及基于选择状态进行某些操作（如删除）。本文将详细介绍如何通过...

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

    这段代码展示了如何根据用户操作动态地修改表格，实现了添加、删除行，以及全选和单选复选框的同步。理解并掌握这些基本操作对于JavaScript开发者来说至关重要，因为它们构成了动态网页应用的基础。

    用checkbox选择删除数据库中的多条数据

    例如，我们可以使用`document.querySelectorAll('input[type="checkbox"]:checked')`获取所有被选中的复选框，然后读取其`value`属性，这些值通常对应数据库中记录的ID。 一旦获得了要删除的记录ID，就需要与服务器...

    JS获得选取checkbox整行数据的方法

    在示例中，我们将重点讲解如何利用JavaScript对DOM节点进行操作，以及如何处理与checkbox选中状态相关联的行数据。 首先，我们需要了解DOM（文档对象模型）树的概念。在HTML文档中，所有的元素都被看作是节点，而...

    通过在GridView中CheckBox多选的批量删除，经典

    后端处理则需要监听GridView的某个事件，比如Button的Click事件，获取到被选中的CheckBox对应的行数据，然后在服务器端进行批量删除操作。这通常涉及到对DataSource的筛选和数据库的SQL操作。例如，使用Linq to ...

    原生JS和JQuery动态添加、删除表格行的方法

    ### 原生JS和JQuery动态添加、删除表格行的方法知识点 #### 知识点一：原生JavaScript动态添加表格行 在原生JavaScript中，动态添加表格行可以通过获取表格对象，然后使用`insertRow`和`insertCell`方法来实现。`...

    checkbox全选反选与批量删除附源码

    5. **响应反馈**：Servlet执行完删除操作后，需要返回一个响应告知前端操作是否成功，前端根据响应提示用户。 总结，这个项目涵盖了前端的用户交互逻辑和后端的数据处理，对于初学者来说是一个很好的实践项目。通过...

    点击table任意列选中当前行demo

    这个示例可能是为了实现用户在表格中通过点击某一列来选中整个行，以便进行进一步的操作，如编辑、删除或批量处理。下面我们将详细讨论这个功能的实现原理和涉及的技术点。 1. **HTML Table**：HTML中的`&lt;table&gt;`...

    Javascript动态添加與刪除Talbe行

    JavaScript 动态添加与删除Table行是网页交互中常见的需求，尤其在处理表格数据时，如用户管理、订单列表等场景。以下将详细介绍如何使用JavaScript实现这一功能。 首先，我们来看如何动态插入行。有两种常见的方式...

    checkbox全选删除

    在ASP.NET中，实现页面上的复选框（Checkbox）全选和批量删除功能是一项常见的需求。这通常涉及到前端用户界面的交互以及后端数据的处理。以下将详细讲解如何通过几步简单的代码实现这一功能。 首先，我们需要在...

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics