`
j2ee_yohn
  • 浏览: 168355 次
  • 性别: 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
评论
发表评论

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

相关推荐

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

    　本文实例为大家分享了js实现添加删除表格的具体代码，供大家参考，具体内容如下　效果:　1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false　1.1.当前新增的复选框加上点击事件　2、点击删除按钮 ...

    vue.js选中动态绑定的radio的指定项

    上一文，介绍了vue.js动态添加、删除绑定的radio选项，本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的，选中radio或者checkbox需要注意的是： 不管&lt;input type='radio checked='true''&gt; 你...

    inputcheckbox连动

    @param value input[type='checkbox'] 的值 多个用',' 分开 程序会找到值自动选中 @param inputIdString input[type='checkbox']前缀 格式如 s1-1-1 组合为 inputIdString+当前input['type=checkbox']值 @param ...

    GridView使用集合

    1、JavaScript设置GridView行的背景颜色，单偶行的背景颜色，鼠标停留行背景，鼠标选中时的行背景 2、GridView的JavaScript中的行单击，双击、删除提示框、快捷键事件 3、GridView设置属性，单元格文本颜色，单元格...

    Ext js 教程大全

    再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    程序天下:JavaScript实例自学手册

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    两个listbox实现选项的添加删除和搜索

    group.js 代码如下:function addMember() { //右侧选中的项添加到左侧 var add=$(“#newAddMembersId”).val(); var del=$(“#deleteMembersId”).val(); var ext=$(“#existedMemberId”).val(); var newAddId=””...

    《程序天下：JavaScript实例自学手册》光盘源码

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    Ext js-2.0 带API

    　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    ExtJS 4.2.0

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    深入浅出Ext JS

    　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    extjs学习 功能丰富，无人能出其右

    　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    EXTJS 3.0中文版文档+实例

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    EXTJS开发文档

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...

    extjs2.2.1

    再加上可编辑grid，添加新行，删除一或多行，提示多行数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...

    JSP+Ajax 添加、删除多选框

    本例是采用JSP + Ajax + 文本来演示多选、全选，添加、删除、更新checkbox多选框的效果。 本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据，利用JSP操作文本的效果。 1，JavaScript 用来控制...

    EXTJS 3.3.1例子

    　再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格...

    批量删除记录时如何实现全选方法总结

    如果有个全选按钮把多个页面上显示的记录全都选中删除那比一条条的删除要人性化得多，接下来说一说如何实现，其实网上一搜有好多文章都是说如何进行批量删除的，大体上可以分为两大类1：利用JS脚本实现全选。...

    EasyUI入门教程--第01课_EasyUI简介.avi

    第09课(讲解datagrid的行编辑模式，增加、删除、修改，扩展editor的类型，扩展datagrid，增加动态改变editor属性，简单介绍了form的load，简单介绍了弹窗编辑模式，讲解了双击行开启编辑模式，选择行开启编辑模式，...

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi

    第09课(讲解datagrid的行编辑模式，增加、删除、修改，扩展editor的类型，扩展datagrid，增加动态改变editor属性，简单介绍了form的load，简单介绍了弹窗编辑模式，讲解了双击行开启编辑模式，选择行开启编辑模式，...

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