精华内容
下载资源
问答
  • js动态表格添加一行删除一行保存一行
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="javascript"> 
     //窗口表格增加一行
      function addNewRow(){
       var tabObj=document.getElementById("myTab");//获取添加数据的表格
       var rowsNum = tabObj.rows.length;  //获取当前行数
       //var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
       
       var myNewRow = tabObj.insertRow(rowsNum);//插入新行
       //1checkbox
       var newTdObj1=myNewRow.insertCell(0);
       newTdObj1.innerHTML="<input type='checkbox' name='chkArr'   id='chkArr_"+rowsNum+"' style='width:20px' />";
       //2序号
       var newTdObj2=myNewRow.insertCell(1);
       newTdObj2.innerHTML="<input type='text'     name='nodecode' id='nodecode_"+rowsNum+"' style='width:40px' value='"+rowsNum+"'/>";
       //3节点名称
       var newTdObj3=myNewRow.insertCell(2);
       newTdObj3.innerHTML="<input type='text'     name='nodename' id='nodename_"+rowsNum+"' style='width:140px' />";
       
       //4
       var newTdObj4=myNewRow.insertCell(3);
       newTdObj4.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
       
       var newTdObj5=myNewRow.insertCell(4);
       newTdObj5.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
       
       
       var newTdObj6=myNewRow.insertCell(5);
       newTdObj6.innerHTML="<input type='button'    name='saveButton'  id='saveButton_"+rowsNum+"'  value='保存'  οnclick='saveData("+rowsNum+")' style='width:60px' />";
      }
    //窗口表格删除一行
      function removeRow(){
       var chkObj=document.getElementsByName("chkArr");
       var tabObj=document.getElementById("myTab");
       for(var k=0;k<chkObj.length;k++){
        if(chkObj[k].checked){
         tabObj.deleteRow(k+1);
         k=-1;
        }
       }
      }
      
      function saveData(rowsNum){
      var codeValue = document.getElementById("nodename_"+rowsNum).value;
      alert(codeValue);
      var nodeperValueArray = document.getElementsByName("nodeper_"+rowsNum);
     for(var i=0;i<nodeperValueArray.length;i++){
    var nodeperValue = nodeperValueArray[i].value;
    alert(nodeperValue);
     }
      }
    </script>
    </head>
    <body>
    <input type="button" name="xx" οnclick="addNewRow();" value="增加一行" />
    <input type="button" name="yy" οnclick="removeRow();" value="删除一行" />
    <table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
            <tr>
             <td width="40px"  align="center" >操作</td>
             <td width="40px"  align="center" >序号</td>
             <td width="70px"  align="center" >节点名称</td>
             <td width="70px"  align="center" >节点编码1</td>
    <td width="70px"  align="center" >节点编码2</td>
    <td width="70px"  align="center" >操作</td>
           </tr>
        </table>
    </body>
    </html>
    展开全文
  • html表格新增一行删除一行

    千次阅读 2019-01-21 10:17:01
    主要思路:现在页面中写段你想要的html代码样式,然后设置为隐藏可见(style="display: none").然后在js中获取该段代码,做处理后重写回html中   &lt;!DOCTYPE html&gt; &lt;...

    主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style="display: none").然后在js中获取该段代码,做处理后重写回html中

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新增一行</title>
    </head>
    <body>
    
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
    
        <!--这一行是隐藏的,主要用户方便js中获取html代码-->
        <!--##:js中会替换成数字-->
        <tr id="show" style="display: none">
            <td>##</td>
            <td>
                <input id="name##" />
            </td>
            <td>
                <input id="phone##" />
            </td>
            <td>
                <input id="address##" />
            </td>
            <td>
               <button type="button" onclick="deleteRow('##')">删除</button>
            </td>
        </tr>
    </table>
    <button type="button" onclick="addRow()">新增一行</button>
    
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script >
        var index = 0;//初始下标
        var indexArr= new Array();
    
        //新增一行
        function addRow() {
            index++;
            indexArr.push(index);
    
            var showHtml = $("#show").html();
            var html = "<tr id='tr##'>"+showHtml+"</tr>";
            html = html.replace(/##/g,index);//把##替换成数字
    
            $("#show").before($(html));
    
            console.log("当前下标数组",indexArr);
        }
    
        //删除一行
        function deleteRow(inde){
            $("#tr" + inde).remove();
            var a = indexArr.indexOf(parseInt(inde));
    
            if (a > -1) {
                indexArr.splice(a, 1);
                console.log("当前下标数组",indexArr);
            }
    
        }
    </script>
    </body>
    </html>

     

    展开全文
  • jQuery动态增加表格一行删除一行

    千次阅读 2018-11-07 22:22:41
    jQuery动态增加表格一行删除一行

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                   

    今天在处理表格的动态增加一行,和删除一行,一开始用js,但是写起来有点复杂,而且不好控制,最后还是用了jQuery,很轻松的就搞定了,代码如下:

    $(document).ready(function() {
     $("#newBtn").bind("click", function(){
      //alert($("input:checked"));
      $("#myTable").append("<tr><td><input id=\"sd\" type=\"checkbox\" /></td><td><input type=\"text\" /></td></tr>");
      alert(document.getElementById('sd').value);
     });
     
     $("#delBtn").bind("click", function(){
      //alert($("input:checked"));
      $("input:checked").parent().parent().remove();
     });
     
    });

    这样就可以轻松的搞定了,也可以进行多行的删除

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    展开全文
  • 最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...

    最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现:
    在这里插入图片描述
    当点击“添加输入框”按钮时,就会自动添加一行
    在这里插入图片描述

    下面我们来一下代码实现(把实际项目中的HTML代码简化了,其他功能可自己加)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        table.table input{ /*可输入区域样式*/
    width:100%;
    height: 100%;
    border:none; /* 输入框不要边框 */
    font-family:Arial;
    }
    </style>
    </head>
    <body>
    <br><br>
    <center><h3>Jquery实现表格动态增加一行,删除一行</h3></center>
    <table class="table" border="1" align="center">
        <thead>
        <tr>
            <th>序号</th>
            <th>配置要求</th>
            <th>主要技术参数</th>
        </tr>
        </thead>
        <tbody>
        <tr id="clo">
            <td class="td">1</td>
            <td> <input placeholder="添加配置要求" /></td>
            <td> <input placeholder="添加主要技术参数" /></td>
        </tr>
        <tr>
            <td class="td">2</td>
            <td> <input placeholder="添加配置要求" /></td>
            <td> <input placeholder="添加主要技术参数" /></td>
        </tr> 
        </tbody>
    </table>
    <button onclick="fun()">增加一行</button>
    <button onclick="del()">删除一行</button>
    <script type="text/javascript">  
    	//前面的序号1,2,3......                 
        var i = 1;
        $(".td").each(function(){
            $(this).html(i++);
        })
    	//添加一行
        function fun(){
            var $td = $("#clo").clone();       //增加一行,克隆第一个对象
            $(".table").append($td);
            var i = 1;
            $(".td").each(function(){       //增加一行后重新更新序号1,2,3......
            $(this).html(i++);
            })
            $("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空
        }
    	//删除一行
        function del(){
            $("table tr:not(:first):not(:first):last").remove();//移除最后一行,并且保留前两行
        }
    </script>
     </body> 
    </html>
    

    该代码的截图:
    在这里插入图片描述
    在这里插入图片描述
    简单易于理解,这里不做其他解说了

    展开全文
  • Layui表格手动添加一行删除一行

    万次阅读 2019-04-26 19:50:15
    css代码: <table class="layui-hide" id="demo" lay-filter="demo"></table>...首先要对表格渲染下 var addata = [{//可以赋值 "LocationNumber": "" , "InventoryQuantity": "" ...
  • $("#tableId tr:not(:first):not(:last)").html("");其中#tableId为表格的id或者是$("#tableId tr:not(:first):not(:last)").empty("");
  • jQuery删除表格中的一行数据

    千次阅读 2018-03-30 11:23:12
    //删除一行 $scope.delete=function(id){ for (var i = 0; i &lt; $scope.datas.length; i++) { if($scope.datas[i].gid==id) { $scope.datas.splice(i,1); break; } ...
  • 表格后新增一行的逻辑很简单,直接添加一行表格数据就行。删除表格行的逻辑也很简单,通过获取选中行和表格数据进行比较,如果相等(即被选中)则从tableData中删除该条数据。 具体实现逻辑如下: < div id = ...
  • js动态给表格添加一行删除一行

    千次阅读 2018-10-30 15:11:06
    // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add(){ num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); ...
  • HTML表格动态增加一行/删除/修改

    千次阅读 2016-10-19 13:11:06
    HTML表格动态增加一行/删除/修改
  • 动态添加删除table页面一行input表格

    万次阅读 2015-04-15 23:06:18
    今天偶然看到个网友询问JSP页面上动态给表格增加删除行,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中,首先在body中构造了个table,为了方便后续的操作,我们给...
  • jquery入门之动态表格---动态添加一行
  • Jquery删除表格一行后的所有行

    千次阅读 2015-06-10 09:49:28
    1、获得某个table某一行后的所有行 $("table tr").eq(1).nextAll().remove();
  • table-js删除行 function deleteRow(tableID, obj) {//参数为表格ID,触发对象 //获得触发对象的行号,parentElement的个数取决于触发对象为TR的第几级子项,input=>td=>tr,所以parentElement有两个 var ...
  • jquery和js代码如下(该方法有bug,至少要留一个模板,否则,之后能再新增行): ... $(".rsnum").each(function(){ //增加一行后重新更新序号1,2,3...... $(this).attr('value',i++); }) } $(document
  • -------------------------------html部分--------------------------      第一行      1       追加 减少 -------------------------------jQ
  • Jquery实现表格添加,删除一行

    千次阅读 2018-08-24 19:39:43
    Jquery实现表格添加,删除一行 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &...
  • 用之前需要引用  /*  * 克隆表格行  */ function addrow(){ var tr = $("#tabtr"); //tabtr是你要克隆的表格行的id var newtr = tr.clone(); //克隆tr newtr.find(":i
  • 通过JS新增与删除表格中的

    千次阅读 2019-03-28 12:41:15
    通过JS新增与删除表格中的行 ...下面是我新增表格中某一行的JS代码,先自定义一个方法。方法的名称是随便命名的,再自定义两个变量,这两个变量,一个是获取table中的tr,从而好判断tr有多少行,一个是...
  • ElementUI中的el-table中实现动态添加一行删除一行、清空所有行 场景 效果如下 实现 首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList, 并且通过 添加了勾选框。 然后通过@selection-change=...
  • word对齐表格不一行的文字

    千次阅读 2019-10-31 15:45:05
    右键,表格属性,单元格,居中
  • (rs.next()){%> <td><%=rs.getString(1)%> <td><%=rs.getString(2)%> <td><%=rs.getString(3)%> ...知道如何选中表格的某一行,然后点击“删除”按钮删除此行,并且数据库里的这条记录也删除
  • 我用如下SQL语句创建了zcxIncome表格,并插入数据, cmd.CommandText = string.Format("create table zcxIncome(Num int identity(1,1) primary key,Mode varchar(50)"); cmd.CommandText =
  • 开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据。 HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 &amp;amp;amp;lt;form action=&...
  • Layui表格删除行

    千次阅读 2019-06-18 08:06:20
    在这里我要实现的删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中,想要实现这个效果需要怎么做呢? 首先你得知道键盘的键码,这个肯定是要的,这个去网上去搜一下,就会有很详细的讲解了。 首先...
  • 利用javascript动态添加表格行以及删除表格行

    万次阅读 多人点赞 2018-09-29 08:41:01
    首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。 如图: 对应的html代码: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...tit...
  • layui表格实现多选表格行批量删除

    千次阅读 2020-10-11 20:21:01
    多说,直接上代码 ...这样才能知道你选中了哪一行,接着通过循环选中行的长度,将该行的ID字段一个个添加到数组中,这样就获取到了需要删除多行的ID值了。 全程图片,完整过程!如懂,可私聊作者 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 490,761
精华内容 196,304
关键字:

如何删除表格不需要的一行