精华内容
下载资源
问答
  • 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

    这里写图片描述
    展开全文
  • 删除表格最后一行

    千次阅读 2019-05-24 17:27:13
    删除表格最后一行边框 $('#reportTable tr:last').find('td').css({border:"none"})

    删除表格最后一行边框

     $('#reportTable tr:last').find('td').css({border:"none"})

     

    展开全文
  • js动态给表格添加一行删除一行

    千次阅读 2018-10-30 15:11:06
    // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add(){ num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); ...
  • 最近的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...
  • Layui表格手动添加一行删除一行

    万次阅读 2019-04-26 19:50:15
    css代码: <table class="layui-hide" id="demo" lay-filter="demo"></table>...首先要对表格渲染下 var addata = [{//可以赋值 "LocationNumber": "" , "InventoryQuantity": "" ...
  • 如题,我在界面上有个表格表格一行后面有个删除按钮,当我点击删除按钮时,我希望能获取按钮所在这一行的数据,以用来post到后端,在数据库中删除一行数据 我的架构为django 1、表格的html title body
  • Layui表格删除行

    千次阅读 2019-06-18 08:06:20
    在这里我要实现的删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中,想要实现这个效果需要怎么呢? 首先你得知道键盘的键码,这个肯定是要的,这个去网上去搜一下,就会有很详细的讲解了。 首先...
  • 表格后新增一行的逻辑很简单,直接添加一行表格数据就行。删除表格行的逻辑也很简单,通过获取选中行和表格数据进行比较,如果相等(即被选中)则从tableData中删除该条数据。 具体实现逻辑如下: < div id = ...
  • 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; &...
  • 动态添加删除table页面一行input表格

    万次阅读 2015-04-15 23:06:18
    今天偶然看到个网友询问JSP页面上动态给表格增加删除行,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中,首先在body中构造了个table,为了方便后续的操作,我们给...
  • table-js删除行 function deleteRow(tableID, obj) {//参数为表格ID,触发对象 //获得触发对象的行号,parentElement的个数取决于触发对象为TR的第几级子项,input=>td=>tr,所以parentElement有两个 var ...
  • ElementUI中的el-table中实现动态添加一行删除一行、清空所有行 场景 效果如下 实现 首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList, 并且通过 添加了勾选框。 然后通过@selection-change=...
  • js实现添加删除表格一行

    千次阅读 2009-08-18 08:46:00
    表格添加删除一行的方法在网上也有比较多的例子,今天把我的也拿出来给大家分享一下,用的是jquery的方法非常简单://记录行数var areaCount=1;//删除链接模板htmlvar delRowTemplete = "删除";var ...
  • Jquery删除表格一行后的所有行

    千次阅读 2015-06-10 09:49:28
    1、获得某个table某一行后的所有行 $("table tr").eq(1).nextAll().remove();
  • JS实现表格添加,删除一行

    万次阅读 2018-08-13 10:26:36
    "添加" onclick = "addtr()" > < table border = "1" id = "tid" > < tr > < td > 用户编号 td > < td > 用户姓名 td > < td > 操作 td > tr > < tr > < td > 1 td > < td...
  • HTML表格动态增加一行/删除/修改

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

    千次阅读 2020-06-18 16:37:49
    表格增加一行或者减少一行 xx.vue <template> <div> ;" max-height="250"> 链接名称" align="center" show-overflow-tooltip min-width="30%" > <template slot-scope="scope"> [scope.$index].linkName" ...
  • html代码:   jquery代码,记得引文件路径: ... * 编辑表格 ...* 新增一行 */ addRow:function(){ $mtr = $("#amsTbody tr:last").clone(); $mtr.each(func
  • layui点击数据表格添加或删除一行

    万次阅读 2018-08-15 18:02:10
    数据表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[ {type:'checkbox',...
  • $("#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; } ...
  • alert("请选中一行") } } <!--可编辑表格--> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 ()"> ...
  • 表格html         名称测量范围不确定度证书编号有效期
  • Ajax方式删除表格一行数据

    千次阅读 2013-08-20 16:05:39
    /** * Ajax方式删除信息--后台数据 ... * obj 删除行的 */ function removeRow(action,id,obj){ if(confirm('确定要删除吗?')){ Ext.Ajax.request({ url : encodeURI("alone.portal?.f=${namespace}&.pmn=
  • -------------------------------html部分--------------------------      第一行      1       追加 减少 -------------------------------jQ

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 476,057
精华内容 190,422
关键字:

做表格怎么删除一行