精华内容
下载资源
问答
  • 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>
    展开全文
  • 一直在看学姐做个东西,去了解看,原来是 点击按钮让表格增加行增加按钮跟随在每一新增的后面,看学姐还是花了点时间弄这个的,我就在想,这是不是有点难啊,我就自己去做了这个功能试试的。 我最开始的思路...

    一直在看学姐做个东西,去了解一看,原来是  点击按钮让表格增加行,增加按钮跟随在每一新增行的后面,看学姐还是花了点时间弄这个的,我就在想,这是不是有点难啊,我就自己去做了这个功能试试的。

    我最开始的思路是让增加按钮所在的div相对于table表格定位,用left和top让它和每一个tr在同一行

    有两种布局table和div的思路:一是table所处的div层和增加按钮所处的div层在同一级,这时候相对于table定位的话,top就是距离table顶部的距离,所以要使增加按钮跟随在每一新增行的后面,就先获取tr行数,jquery设置top的数值,看一下代码

    function adds(){
            var trr='<tr><td></td><td></td></tr>';
            $('.table').append(trr);
            var trs=$("#table tr");
            var trL=trs.length-1;  //去掉表头
            var addin=$(".add-in");//增加按钮
            for(var i=0;i<trL;i++){
                addin.css("top",(10*i)+'px');
            }
        }

    第二就直接让增加按钮所在的div置于table下面,就相对于table的最后位置定位,所以就没有过多的js代码了

    <div class="container">
        <div class="col-lg-12">
            <div class="mainly" style="margin-top: 30px;position: relative">
                <table class="table table-bordered table-hover" style="width: 95%">
                    <thead>
                    <tr><th>111</th><th>222</th><th>333</th><th>444</th><th>555</th><th>666</th></tr>
                    </thead>
                    <tbody>
                    <tr><td>hhh</td><td>hhh</td><td>hhh</td><td>hhh</td><td>hhh</td><td>hhh</td></tr>
                    </tbody>
                </table>
                <div class="add pull-right" style="width: 5.1%;top: -33px; position: relative;">
                    <div class="add-in" οnclick="adds()" style="background: lightskyblue;height: 30px">
                        <span>+</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function adds(){
            var trr='<tr><td>+</td><td></td><td></td><td></td><td></td><td></td></tr>';
            $('.table').append(trr);
        }
    </script>


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

    千次阅读 2016-08-05 19:48:38
    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);//插入新行
       var newTdObj1=myNewRow.insertCell(0);
       newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
       var newTdObj2=myNewRow.insertCell(1);
       newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
       var newTdObj3=myNewRow.insertCell(2);
       newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
       var newTdObj4=myNewRow.insertCell(3);
       newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+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;
        }
       }
      }
    </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" class="top-bt liebiao-c" align="center" >操作</td>
            <td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
            <td class="top-bt liebiao-c" align="center" >节点名称</td>
            <td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
           </tr>
        </table>
    </body>
    </html>
    展开全文
  • addBtn.innerHTML = "增加"; addBtn.setAttribute('onclick',"attachItem.call(this)") addTd.appendChild(addBtn); firstTr.appendChild(addTd); var addTdCopy = addTd.cloneNode(true); var delBtn = document....
    function insertAfter(newElement,targetElement){
        var parent = targetElement.parentNode;
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);
        }else{
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }




      var firstTr = document.getElementsByClassName('table')[0].getElementsByTagName('tr')[1];//获取第一个tr
      var firstTrCopy = firstTr.cloneNode(true);//再存一次




    function attachItem(){
    console.log(this,'this=======')
    insertAfter(firstTrCopy,this.parentElement.parentElement);
    firstTrCopy = firstTrCopy.cloneNode(true);
    }


    function deleteItem(){
    this.parentElement.parentElement.remove();


    }


      var addTd = document.createElement('td');
    var addBtn = document.createElement('button');
    addBtn.innerHTML = "增加";
    addBtn.setAttribute('onclick',"attachItem.call(this)")
    addTd.appendChild(addBtn);
    firstTr.appendChild(addTd);


    var addTdCopy = addTd.cloneNode(true);
    var delBtn = document.createElement('button');


    delBtn.innerHTML = "删除";


    delBtn.setAttribute('onclick',"deleteItem.call(this)")
    ;
    addTdCopy.appendChild(delBtn);




    firstTrCopy.appendChild(addTdCopy);
    展开全文
  • jQuery动态增加表格一行和删除一行

    千次阅读 2018-11-07 22:22:41
    jQuery动态增加表格一行和删除一行
  • 页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接,使用 DOM 节点的删除操作将对应的行数据删除 文本输入框中输入姓名、年龄、班级和手机号,并选择性别 ...
  • 1.列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate',
  • 最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...
  • alert("请选中一行") } } <!--可编辑表格--> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 ()"> ...
  • js动态给表格添加一行、删除一行

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

    千次阅读 2016-08-02 09:21:39
    代码片段: ...列 td > < td > 列二 td > < td > 列三 td > < td > 列四 td > tr > table > < input type = "button" value = "添加" onclick = "InserTab()" />
  • Layui表格手动添加一行和删除一行

    万次阅读 2019-04-26 19:50:15
    css代码: <table class="layui-hide" id="demo" lay-filter="demo"></table>...首先要对表格渲染下 var addata = [{//可以赋值 "LocationNumber": "" , "InventoryQuantity": "" ...
  • table表格循环高亮显示每一行

    千次阅读 2018-01-12 09:53:21
    步,创建jsp或者html文件,并引入jQuery插件,如下: ...charset=UTF-8" language="java" %> ...head> meta charset="UTF-8"> title>表格高亮显示案例title> script style="text/javascript" s
  • 例如:身高那一行下方想加一个 胸围 100cm ,就点击“下方添加行” 于是下方出现一行空行 实现过程 一、纵向表格部分 java后端——备好数据的过程 注意事项 以上前端代码主体是谁?假设是 form (spri...
  • 效果图: 实现: <el-button @click="addziduan">添加字段</el-button> 表格原本绑定的数据 prototypes:[ ... describe: '设备类型字段,不可修改', ... // 向表格数组中数据添加一行 this.prototypes.pu
  • 这几天基于react写了一个小demo测试,主要实现的功能是:输入框中输入文字,点击添加按钮,下方的表格中会自动添加一行数据,点击删除按钮,该行数据被删除。  先来看看最后的效果图:  操作前  操作...
  • 点击按钮增加一行表格

    万次阅读 2017-12-26 16:24:37
    点击按钮增加一行表格 做此功能我们要用到两个方法: insertRow(): insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() :insertCell() 方法用于 HTML 表的一行的指定位置插入一个空的 元素...
  • html表格新增一行和删除一行

    千次阅读 2019-01-21 10:17:01
    然后js中获取该段代码,做处理重写回html中   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
  • 2、选中数据列和辅助列,点击排序和筛选命令,进行自定义排序,以辅助列为关键字进行升序排列,排序完成,即可实现隔行插入一行。3、最终效果:转自 https://zhidao.baidu.com/question/320383772.h...
  • vue table表格新增添加一行数据

    千次阅读 2019-11-21 10:11:52
    表格样式并不能是难点 主要是点击新增按钮和删除按钮自增的编号的修改 <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#3d80f2',color:'#fff',fontSize:'16px',height:'...
  • 表格后新增一行的逻辑很简单,直接添加一行表格数据就行。删除表格行的逻辑也很简单,通过获取选中行和表格数据进行比较,如果相等(即被选中)则从tableData中删除该条数据。 具体实现逻辑如下: < div id = ...
  • 用dom追加实现添加表格每一行

    千次阅读 2012-02-29 20:06:05
    实现追加:  1)获取原来数据  2)原来的数据+新的内容 写入到文本节点中 dom访问常见属性 添加节点:1)创建元素节点 createElement("元素的名称") 创建是个标签  ... 添加节点方法: 使用 appendChild 把我
  • 点击《增加》按钮其函数响应函数中增加下面的函数 void C**Dlg::OnBnClickedAdd() {  // TODO: 添加控件通知处理程序代码  long len = m_flexgrid.get_Rows(); //m_flexgrid为MSFlexgrid控件的变量...
  • 动态添加删除table页面一行input表格

    万次阅读 2015-04-15 23:06:18
    今天偶然看到个网友询问JSP页面上动态给表格增加行,删除,碰巧那会儿比较闲,就动手写了一下,记录下来,希望能帮到需要的朋友们。 上面的代码中,首先body中构造了个table,为了方便后续的操作,我们给...
  • 开发过程需要新增数据,希望数据总是添加到jagrid表格的第一行,以便用户查看。之前实现的总是加到最后一行,网上搜了下,还真用,这个方法一直才用,不知道居然可以指定插入位置!!! 1. $("#jqgrid").addRowData...
  • <!DOCTYPE html > < html lang= "en" > < head > ...表格第一行不能删除!...增加一行 " /> < input type= "button" id= "detrow" value= " 删除一行 " /> body > html > 效果图:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 293,137
精华内容 117,254
关键字:

如何在表格每行后添加一行