精华内容
下载资源
问答
  • 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>
    展开全文
  • 1:先HTML中设计一个表格,给这个表格设置ID,方便等下在JS中获取这个表格,为了方便简单,这里就只设计一行数据了,给这个行也设置一个ID,然后再弄一些数据 HTML表格设计代码截图: 2:现在再去JS中写一个方法...

    1:先在HTML中设计一个表格,给这个表格设置ID,方便等下在JS中获取这个表格,为了方便简单,这里就只设计一行数据了,给这个行也设置一个ID,然后再弄一些数据
    HTML表格设计代码截图:
    在这里插入图片描述
    2:现在再去JS中写一个方法,给这个方法取一个名称并传递一个参数,比如:“function zjff1(rowIndex)”,接下来就是在这个方法里面写代码:先通过ID获取到刚刚设计的那个表格,并变量它,然后再变量获取10个td,因为这个表格中有10个,给这10个td的HTML赋值,比如“《111》”,每个都需要赋值,再“var xtr=table.insertRow(rowIndex)”,把刚刚的每一个td都添加进去
    JS方法代码:
    function zjff1(rowIndex){
    var table=document.getElementById(“table”);
    var xg1=document.createElement(“td”);
    var xg2=document.createElement(“td”);
    var xg3=document.createElement(“td”);
    var xg4=document.createElement(“td”);
    var xg5=document.createElement(“td”);
    var xg6=document.createElement(“td”);
    var xg7=document.createElement(“td”);
    var xg8=document.createElement(“td”);
    var xg9=document.createElement(“td”);
    var xg10=document.createElement(“td”);
    xg1.innerHTML="《111》";
    xg2.innerHTML="《222》";
    xg3.innerHTML="《333》";
    xg4.innerHTML="《444》";
    xg5.innerHTML="《555》";
    xg6.innerHTML="《666》";
    xg7.innerHTML="《777》";
    xg8.innerHTML="《888》";
    xg9.innerHTML="《999》";
    xg10.innerHTML=’–删除–’;
    var xtr=table.insertRow(rowIndex);
    xtr.appendChild(xg1);
    xtr.appendChild(xg2);
    xtr.appendChild(xg3);
    xtr.appendChild(xg4);
    xtr.appendChild(xg5);
    xtr.appendChild(xg6);
    xtr.appendChild(xg7);
    xtr.appendChild(xg8);
    xtr.appendChild(xg9);
    xtr.appendChild(xg10);
    }
    3:在页面加载事件中获取那个行上面的ID为“zjnr1”,然后给这个ID一个点击事件,再在点击事件中获取ID为“one”的Index加上1,再调用刚刚那个方法,然后就OK了
    点击事件截图:
    在这里插入图片描述

    展开全文
  • 表格后新增一行的逻辑很简单,直接添加一行表格数据就行。删除表格行的逻辑也很简单,通过获取选中行和表格数据进行比较,如果相等(即被选中)则从tableData中删除该条数据。 具体实现逻辑如下: < div id = ...

    element组件生成表格

    前端使用element组件实现表格创建,开发文档中有一个单元格点击事件cell-dblclick——当某个单元格双击时触发该事件。通过使用该事件实现单元格可编辑。表格后新增一行的逻辑很简单,直接添加一行表格数据就行。删除表格行的逻辑也很简单,通过获取选中行和表格数据进行比较,如果相等(即被选中)则从tableData中删除该条数据。

    具体实现逻辑如下:
    <div id="app">
      <template>
        <el-table
        :data="tableData"
        border
        @selection-change="selectionChangeHandle"
        @cell-dblclick="celledit"
        style="width: 671px;height:243px">
    		<el-table-column>
    			<template slot="header" slot-scope="scope">
    				<el-button @click="addRow()">新增</el-button>			
    				<el-button @click="batchDelete(tableDataSelections)">删除</el-button>
    			</template>
    			<el-table-column type="selection" width="55"></el-table-column>
    		    <el-table-column type="index" ></el-table-column>
    		    <el-table-column
    		      prop="date"
    		      label="日期"
    		      width="180">
    		       <template slot-scope="scope">
    		         <el-date-picker v-if="scope.row.date.edit"
    		          v-model="scope.row.date.value"
    		          ref="date"
    		          style="width: 100%"
    		          type="date"
    		          value-format="yyyy-MM-dd"
    		          @blur="scope.row.date.edit = false">
    		        </el-date-picker>
    		         <span v-else>{{ scope.row.date.value }}</span>
    		      </template>
    		  </el-table-column>
    		  <el-table-column prop="name" label="姓名" width="180" edit="false">
    		    <template slot-scope="scope">
    		         <el-input v-if="scope.row.name.edit"
    		          ref="name"
    		          v-model="scope.row.name.value"
    		          style="width: 100%"
    		          @blur="scope.row.name.edit = false">
    		        </el-input>
    		         <span v-else>{{ scope.row.name.value }}</span>
    		      </template>
    		  </el-table-column>
    		  <el-table-column prop="address" width="260" label="地址">
    		    <template slot-scope="scope">
    		         <el-input v-if="scope.row.address.edit"
    		          ref="address"
    		          v-model="scope.row.address.value"
    		          style="width: 100%"
    		          @blur="scope.row.address.edit = false">
    		        </el-input>
    		         <span v-else>{{ scope.row.address.value }}</span>
    		      </template>
    		  </el-table-column>
    	  </el-table-column>
      </el-table>
      </template>
    </div>
    
    对应的实现方法
    export default {
    	data() {
            return {
              tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                edit: false
              }],
              tableDataSelections:[]//选中的表格数据
            }
          },
          created(){
          	this.formatData()
          },
          methods: {
          	//表格数据格式化成我们想要的数据
            /* {
              date: {
                value: '',
                edit: false//编辑状态
              }
            } */
            formatData(){
    		this.tableData.forEach(item => {
              	for(let key in item) {
                	item[key] = {
                  	value: item[key],
                    edit: false
                  }
                }
              })
            },
            //表格新增行
            addRow() {
            this.tableData.push({
              date: { value: "", edit: true },
              name: { value: "", edit: true },
              address: { value: "", edit: true }
            });
        	},
        	// 多选
    	    selectionChangeHandle(val) {
    	      this.equipmentDataSelections = val;
    	    },
    	    //删除选中数据(单纯实现前端删除)
        batchDelete(selections) {
          if (selections.length > 0) {
            this.$confirm(`确定删除选中数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
                for (let i = 0; i < selections.length; i++) {
                  for (let y = 0; y < this.tableData.length; y++) {
                    if (this.tableData[y] == selections[i]) {
                      this.tableData.splice(y, 1);
                      break;
                    }
                  }
                }
              }).catch(() => {});
          }
        },
        //单元格双击事件
          	celledit(row, column, cell, event){
            	if(row[column.property]){
              	row[column.property].edit = true
                setTimeout(() => {
                	this.$refs[column.property].focus()
                }, 20)
              }
            }
          }
        }
    
    展开全文
  • 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>

     

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

    万次阅读 2019-04-26 19:50:15
    css代码: <table class="layui-hide" id="demo" lay-filter="demo"></table>...首先要对表格渲染 var addata = [{//可以赋值 "LocationNumber": "" , "InventoryQuantity": "" ...
  • jQuery动态增加表格一行和删除一行

    千次阅读 2018-11-07 22:22:41
    jQuery动态增加表格一行和删除一行
  • 最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...
  • 实现表格内容第一行居中,其他行与第一行左对齐
  • 构造函数使用前两句设置每次点击一个item能够选中一整行以及编辑item功能 ... 然后通过循环使用text().toStdString()获取item的内容并显示到指定的item上 ui-&...//设置选择行为时每次选择一行 ...
  • Layui表格-新增一行空的表格

    千次阅读 2019-07-17 21:39:54
    新增一行空的表格,但是这个这个功能官方文档 并没有介绍;如果你需要用到以上功能的话,可以 使用下面的方法; 当项目需求需要点击新增一行时,可用如下方 式实现: “employeeNum”: “123” , “telp...
  • Excel表格是我们经常使用的一个办公软件。我们使用excel表格时,有时候会需要一个单元格进行换行。如果我们直接敲击回车,那么会直接切换至另一个单元格。...如果我们想让第一行显示“哈哈!...
  • alert("请选中一行") } } <!--可编辑表格--> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 ()"> ...
  • word对齐表格在一行的文字

    千次阅读 2019-10-31 15:45:05
    右键,表格属性,单元格,居中
  • markdown中让图片和表格显示在一行

    千次阅读 2018-10-29 19:02:35
    原本的markdown表格语法是没有这个功能的,只能通过html代码来实现,在表格和图片外面再套上表格,外表格的第个单元格放内表格,后表格放图片标签。具体html代码如下: &lt;table&gt; &lt;tr&...
  • 解决问题 Excel表格一行所有字段一个单元格的情况 解决办法 哈哈,大功告成!
  • 获取某一表格的某一行某一列的值

    千次阅读 2017-12-13 15:13:09
    获取某一表格的某一行某一列的值
  • layui数据表格新增一行

    万次阅读 热门讨论 2018-06-12 13:31:35
    layui的数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现实现的思路是:当点击新增一行时,把之前的数据保存下来,并数据尾部增加一行空数据 ...
  • 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:'...
  • js表格最后添加一行

    千次阅读 2014-03-03 16:58:22
    在表格最后加入一行 三种方法 方法一: jquery: function add_cg(c) { var str = ''; str += ""; str += "" + (c+1) + "  "; str += ""; str += ""; //$("#cg_title_list
  • element-UI的表格点击某一行触发事件

    千次阅读 2019-11-21 11:18:09
    事件名 ...当某一行被点击时会触发该事件 row, column, event 举个栗子: 1 <template> 2 <el-table 3 :data="tableData" 4 stripe 5 @row-click="handdle" 6 style="width: 1...
  • 修改DataGrid表格中的一行数据 怎样新的修改页面中回显选中的那一行数据呢?![图片说明](https://img-ask.csdn.net/upload/201601/16/1452911725_981882.png) 求大神指教
  • 前端获取表格一行内容

    千次阅读 2017-04-25 15:34:53
    获取表格一行的内容,主要可以用于修改表格内容的功能。此功能需要获取到表格内容,然后将内容填入修改页,利用前端直接获取内容,不用后台再次请求数据。 1.表格 > type="checkbox"> 姓名 性别 年
  • 表格一行设置边框的方法

    千次阅读 2018-02-27 01:09:47
    直接设置表格边框是无法实现的,只想的下边框加上下划线,其实就是个单元格的下面加上下划线。所以最简单的方法是对TD设置样式。td{border-bottom:1px solid red;}但此时运行效果每个单元格下划线之间有...
  • 点击按钮增加一行表格

    万次阅读 2017-12-26 16:24:37
    点击按钮增加一行表格 做此功能我们要用到两个方法: insertRow(): insertRow() 方法用于在表格中的指定位置插入一...insertCell() :insertCell() 方法用于 HTML 表的一行的指定位置插入一个空的 元素。 ; char
  • 开发过程需要新增数据,希望数据总是添加到jagrid表格的第一行,以便用户查看。之前实现的总是加到最后一行,网上搜了,还真用,这个方法一直才用,不知道居然可以指定插入位置!!! 1. $("#jqgrid").addRowData...
  • js动态给表格添加一行、删除一行

    千次阅读 2018-10-30 15:11:06
    // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add(){ num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); ...
  • $("#tableId tr:not(:first):not(:last)").html("");其中#tableId为表格的id或者是$("#tableId tr:not(:first):not(:last)").empty("");
  • //点击表格一行获取这一行的某一个单元格 $("#inquire-tab").on("click","tr",function(e){  var arr = [];  $(this).children().map(function(el){  arr.push($(this)[0].innerText)  });  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 478,192
精华内容 191,276
关键字:

在表格内如何下一行