`

JS方法实现table中Row的添加删除

阅读更多
<script language="javascript">
  
    function addRow(){
     var dataBox = document.getElementById("skinRow");
   
     var oTr = dataBox.insertRow(dataBox.rows.length);
   
     var oTd = oTr.insertCell();
     oTd.innerHTML = '<input type="checkbox" name="select">';
   
     oTd = oTr.insertCell();
     oTd.innerHTML = '皮肤名';
     oTd.width = "12%";
   
     oTd = oTr.insertCell();
     oTd.innerHTML = '<input type="text" readonly size=15>';
     oTd.width = "30%";
   
     oTd = oTr.insertCell();
     oTd.innerHTML = '皮肤别名';
   
     oTd = oTr.insertCell();
     oTd.innerHTML = '<input type="text" size=15>';
    }
  
   function deleteRow(){
    var dataBox = document.getElementById("skinRow");
    var len = dataBox.rows.length;
    var num = 0;
  
    for(var i=len-1;i>=0;i--){
     if(dataBox.rows[i].cells[0].children[0].checked){
      if(i==0){
       alert("添加项至少保留一项");
       return;
      }
      num = 1;
      dataBox.rows[i].removeNode(true);
     }
    }
  
    if(num==0){
     alert("请选中所要删除的项");
    }
  
   }
  
   </script>
分享到:
评论

相关推荐

    利用js动态添加删除table行的示例代码

    如下所示: 代码如下://动态添加行function addRow(){ var table = document.getElementById(“tableID”); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格 ...

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    js动态操作表格&lt;/title&gt;[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i&lt;6;i++){var row=document.createElement(“tr...

    table.js:HTML 表控制器(addremovesortsearch 行)

    #Table.js HTML 表格控制器(添加/删除/排序/搜索行) ##下载 通过bower install table.js或npm install table.js ##API 快速入门 表构造器 var myTable = new Table ( { 'id' : 'myTable' , // id of table ...

    JavaScript笔记

    注意:js中的方法可以直接写在代码中,不需要“类”包裹 使用方法:方法名()--&gt;方法调用--&gt;立即执行 2.js文件:网页外专门保存js脚本的文件--推荐 强调:HTML、CSS、JS都要使用UTF-8编码保存(window系统) ...

    Birt中文手册.chm

    任务 3:在 Row.onCreate( ) 方法中有条件地使计数器递增 任务 4:使用 ReportDesign.afterFactory( ) 方法来显示结果 使用 Java 编写事件处理程序 如何创建事件处理程序类并将其添加到 Java 项目中 如何使 Java...

    js简单的表格添加行和删除行操作示例

    代码如下: &lt;... &lt;... } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $(“#addrow”).bind(“click”,function(){ // 取得table var tab = $(“#ta

    用javascript删除当前行,添加行(示例代码)

    删除行 代码如下:[removed] function del(obj) { obj[removed][removed].removeNode(true); } [removed] &lt;body&gt; &lt;table&gt;  单元格1 &lt;td&gt;&lt;input type=button value=”delete this row” ...

    angular动态删除ng-repaeat添加的dom节点的方法

    本文介绍了angular动态删除ng-repaeat添加的dom节点的方法,分享给大家供大家参考,具体如下: 通过点击删除按钮删除数据库信息以及当前行 html代码如下: &lt;div class=row&gt; &lt;!-- PAGE CONTENT BEGINS --&gt;...

    birt中文帮助文档

    任务 3:在 Row.onCreate( ) 方法中有条件地使计数器递增 任务 4:使用 ReportDesign.afterFactory( ) 方法来显示结果 第二十三章、使用 Java 编写事件处理程序 如何创建事件处理程序类并将其添加到 Java 项目中 ...

    birt帮助文档中文版

    任务 3:在 Row.onCreate( ) 方法中有条件地使计数器递增 任务 4:使用 ReportDesign.afterFactory( ) 方法来显示结果 第二十三章、使用 Java 编写事件处理程序 如何创建事件处理程序类并将其添加到 Java 项目中 ...

    cachedTable:本地存储中的简约表

    get row 方法也是线性时间,但取决于与查询匹配的行数(对于没有太多重复项是有效的)。 不要将其用于大型存储(localstorage 最多可容纳 10MB 的数据)。 这仅对小数据集有效。 可能有更好的实现方式,只是为了...

    Ajaxable:Laravel软件包,它允许您通过ajax调用来控制模型,而不会在PHP方面困扰您

    可恶的Ajaxable是Laravel软件包,它允许您控制(创建,编辑,删除)雄辩的模型,而不会在后端打扰... 例如,这是您删除具有指定ID的App\Tag并删除该行的方法(这就是将其包装在.ajaxable-row ): &lt; table&gt;&lt; tr&gt;&lt; t

    MMM-AVStock:MagicMirror模块,用于使用Alphavantage API显示股票价格

    MMM-AVStock MagicMirror模块,用于使用Alphavantage API显示股票价格。 截屏 mode:table mode:ticker mode:grid , direction:'row' mode:ticker with own ... 在表格和表格中添加了purchasePrice和perf2Purc

    php跳转类 model

    function row($table,$where='',$select=0,$id='',$like=0,$a=0,$b=0){ $where = isset($where)&&!empty($where)?$where:''; $id = isset($id)&&!empty($id)?" order by ".$id." desc ":''; $a = isset($a)&&!...

    ASP.NET程序中常用的三十三种代码.txt

    ASP.NET程序中常用的三十三种代码 1. 打开新的窗口并传送参数:  传送参数: response.write("&lt;script&gt;window.open(’*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"’)&lt;/script&gt;")  接收参数: ...

    ASP.NET常用代码

    &lt;script language="javascript" for="document" event="onkeydown"&gt; if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....

    freemarker总结

    方法变量通常是基于给出的参数计算值在数据模型中定义。 6、 用户自定义FTL指令:宏和变换器 7、 节点 节点变量表示为树型结构中的一个节点,通常在XML处理中使用。 在模板里对sequences和hashes初始化 ...

    流程编辑器.zip

    img onclick="deleteListenerField('+id+')" src="../../image/delete.gif" title="'+"删除"+'" style="cursor:hand;"/&gt;'; if(rowData.editing) return s; else return e+'&nbsp;'+d; } function ...

    ETL工具Kettle用户手册

    目录 Kettle 3.0 用户手册 ...................................................................................................................... 1 Kettle 3.0 用户手册 .....................................

Global site tag (gtag.js) - Google Analytics