`

通过checkboxs动态删除多行tr

阅读更多

<html>
<head>
<script>
 function delte() {
  var checkboxs = document.getElementsByName("c1");
  var table  = document.getElementById("mytable"); 
  var allTrlength = table.rows.length;
  var trIndex ;
  for(var i=0; i<checkboxs.length; i++) {
    for(var j=allTrlength - 1; j>0 ;j--) {
   if(checkboxs[i].checked == true) {
    table.deleteRow(checkboxs[i].parentNode.parentNode.rowIndex);
    } 
   }
  }
 }
</script>
</head>
<body>
<table id="mytable">
<tr><td><input type="checkbox" name="c1"></td>
</tr>
<tr><td><input type="checkbox" name="c1"></td>
</tr>
<tr><td><input type="checkbox" name="c1"></td>
</tr>
<tr><td><input type="checkbox" name="c1"></td>
</tr>
<tr><td><input type="checkbox" name="c1"></td>
</tr>
<tr><td><input type="checkbox" name="c1"></td>
</tr>
</table>
<input type="button" value="delete" onclick="delte();">
</body>
</html>

分享到:
评论

相关推荐

    javascript DOM操作之动态删除TABLE多行

    标题中提到的“javascript DOM操作之动态删除TABLE多行”指的是使用JavaScript编程语言来操作文档对象模型(DOM),实现网页上HTML表格(TABLE)的动态删除功能,特别是表格中的多行(tr)。在网页开发中,DOM允许...

    Bootstrap Table 删除和批量删除

    Bootstrap Table 批量删除是指删除多个记录,通过在表格中选择多行记录,然后点击删除按钮,将其删除。Bootstrap Table 提供了多种方式来实现批量删除操作,包括通过按钮删除、通过右键菜单删除等。 在 Bootstrap ...

    jQuery 实现批量提交表格多行数据的方法

    - `append()` 函数:将内容添加到元素内部,如 `$tr.append($td.clone().append("&lt;input type='checkbox'.../&gt;"))` 将新的复选框添加到 `&lt;tr&gt;` 元素内。 3. **动态生成表格数据**: - 使用 `for` 循环遍历JSON...

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

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

    jQuery table选中表格行变色

    例如,通过添加`checkbox`元素并监听`change`事件,可以让用户通过复选框选择多行。此外,可以结合`data-*`属性存储行的额外信息,以便在选中行后进行更复杂的操作,如编辑、删除或导出数据。 以上就是使用jQuery...

    web前端基础入门知识

    2. **其他输入类型**:`&lt;input type="password"&gt;`密码框,`&lt;input type="checkbox"&gt;`复选框,`&lt;input type="radio"&gt;`单选按钮,`&lt;select&gt;`下拉菜单,`&lt;textarea&gt;`多行文本框。 3. **表单提交**:`&lt;form&gt;`标签定义...

    html总结,我的笔记

    通过`&lt;p&gt;`段落、`&lt;h1&gt;`至`&lt;h6&gt;`标题、`&lt;strong&gt;`加粗、`&lt;em&gt;`斜体、`&lt;u&gt;`下划线、`&lt;del&gt;`删除线等标签,可以实现文本的格式化。 4. HTML 链接与导航 `&lt;a&gt;`元素用于创建链接,通过`href`属性指向目标URL。`target`...

    详尽的html学习手册

    HTML表单通过`&lt;form&gt;`元素定义,常用输入元素有`&lt;input&gt;`(多种类型如text、password、checkbox、radio等)、`&lt;textarea&gt;`(多行文本输入)、`&lt;select&gt;`(下拉菜单)和`&lt;button&gt;`(按钮)。`&lt;label&gt;`与`&lt;input&gt;`关联...

    JavaWeb开发基础之Html详解

    6. **文本域**:`&lt;textarea&gt;`标签用于创建一个多行文本输入区域。可以指定其名称、列数和行数等属性。示例代码如下: ```html &lt;textarea name="info" cols="40" rows="7"&gt;&lt;/textarea&gt; ``` 7. **文件上传**:`...

    GridView 72般绝技

    通过在`GridView`的每一行添加一个`CheckBox`控件,用户可以选择多行数据进行批量操作,如删除、更新等。 **示例代码:** ```xml 选择"&gt; &lt;asp:CheckBox ID="CheckBox1" runat="server" /&gt; ``` #### 七、...

    HTML知识初学者学习的好帮手

    表单包含多种输入元素,如`&lt;input&gt;`(type=text, password, radio, checkbox等),`&lt;textarea&gt;`用于多行文本输入,`&lt;select&gt;`和`&lt;option&gt;`创建下拉列表,`&lt;button&gt;`定义按钮。 9. **HTML5的新特性**:HTML5引入了...

    html标签库大全集

    表单元素是HTML交互性的关键,`&lt;form&gt;`定义表单,`&lt;input&gt;`创建输入字段,`&lt;textarea&gt;`用于多行文本输入,`&lt;select&gt;`创建下拉列表,`&lt;option&gt;`定义选项,`&lt;checkbox&gt;`和`&lt;radio&gt;`用于复选框和单选按钮。表单的属性如...

    HTML常见标签

    - `&lt;form&gt;`用于创建表单,`&lt;input&gt;`定义输入字段,type属性可以是text、password、checkbox、radio等。 - `&lt;textarea&gt;`定义多行文本输入,`&lt;select&gt;`定义下拉列表,`&lt;option&gt;`定义选项。 - `&lt;label&gt;`定义标签,与...

    HTML+CSS仿京东购物车页面静态页面

    - 通过CSS属性选择器(`[attr=value]`)可以针对特定属性值的元素设置样式,例如:`input[type="checkbox"]`。 4. 响应式设计: - 使用媒体查询(`@media screen and (max-width: XXXpx)`)实现不同屏幕尺寸下的...

    JavaScript 学习笔记(十三)Dom创建表格

    需要注意的是,在删除过程中,表格的行数会动态减少,因此在循环删除多行时需要特别注意索引的变化。 ```javascript function removeAllRow() { var objTable = document.getElementById("myTable"); var ...

    web前台开发语言摘要

    - **多行文本框**:`&lt;textarea&gt;`用于输入多行文本。 通过上述内容,我们不仅了解了HTML的基本结构和元素,还深入探讨了如何使用HTML来构建复杂的网页结构,包括表格和表单的设计。这些基础知识对于前端开发来说至...

    在b/s开发中经常用到的javaScript技术

    2.2 动态添加,修改,删除下拉框中的元素 2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送) 3、打印类 3.1 打印控件 4、事件类 4.1 屏蔽...

    HTML基本标签大全.docx

    * 删除线:删除线&lt;/strike&gt;` 定义删除线文本 * 上下标:下标&lt;/sub&gt;`、上标&lt;/sup&gt;` 定义上下标文本 * 大小字体:大字体文本&lt;/big&gt;`、小字体文本&lt;/small&gt;` 定义大、小字体文本 字符实体 字符实体用于显示特殊字符。 ...

    html标签总结

    - `type`:定义输入字段的类型,如`text`、`checkbox`等。 - `name`:定义控件的名称。 - **示例**:`用户名"&gt;` #### 插入文本:`&lt;ins&gt;` - **作用**:定义被插入的文本。 - **示例**:`原文:新增的内容。&lt;/p&gt;` ...

Global site tag (gtag.js) - Google Analytics