精华内容
下载资源
问答
  • 本篇文章主要介绍了vue实现增删改查效果的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue.js+Element实现增删改查,具有一定的参考价值,有兴趣的可以了解一下。
  • 主要为大家详细介绍了jQuery对table表格进行增删改查操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 用AngularJS实现表格增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格增删改查</title> <meta...
  • vue表格增删改查

    2019-03-04 09:10:52
    该文件主要以vue.js为主的表格渲染,数据交互。充分的表现了表格增删改查功能,以及vue中input的使用,date日期的选择。
  • JavaScript表格增删改查

    千次阅读 2021-02-01 11:31:26
      先用一个简单的表格来练练手。 添加数据

    简单表单

      先用一个简单的表格来练练手。
    在这里插入图片描述

    HTML部分代码

    <body>
    	<label>姓名:</label>
    	<input type="text" name="name" placeholder="请输入姓名">
    	<br>
    	<span>年龄:</span>
    	<input type="text" name="age" placeholder="请输入年龄">
    	<button onclick="add1()">添加</button><br>
    	<span>姓名:</span>
    	<input type="text" name="username" placeholder="请输入需要查询的姓名">
    	<button>查询</button><br>
    	<br>
    	<table>
    		<thead>
    			<tr>
    				<th>ID</th>
    				<th>姓名</th>
    				<th>年龄</th>
    				<th>操作</th>
    			</tr>
    		</thead>
    		<tbody>
    		</tbody>
    	</table>
    </body>
    

      现在我们需要进行表格中数据的增删改查部分代码的书写了,首先肯定需要先完成增加数据的功能,其次完成删除和查询数据功能,因为修改数据稍微复杂些,所以将修改数据放到最后完成。

    添加数据

      先理清我们需要做什么?

    1. 获取填写的姓名和年龄,并生成一个 id
    2. 在表格中添加一行来保存 id 和填写的姓名、年龄

     1. 获取填写的数据

      使用 document 对象的方法可以获取到填写的数据,这里我用的是getElementsByTagName方法根据标签名来获取对象,也可以用其他的获取元素的方法。

    var id = 1;
    function add1() {
    	// 获取填写的数据
    	var inputLables = document.getElementsByTagName("input");
    	var name = inputLables[0].value;
    	var age = inputLables[1].value;
    	// 简单数据校验	
    	if (name=="" || age=="") {
    		alert("请正确输入");
    		return;
    	}
    }
    

     2. 添加数据

      获取到了填写的数据之后,需要在表格中添加一行,来存储这些数据,这需要添加 tr 标签和 td 标签,那么怎么来添加这些标签呢?

      方法1:拼接字符串

      最简单易懂的方法就是拼接字符串(添加操作的万金油),我们可以使用document的方法获取到 table 标签中的 tbody 标签,然后用innerHTML属性获取到当前 tbody 标签中的文本,在它的后面拼接上HTML语句。

    function add1() {
    	// 获取填写的数据
    	var inputLables = document.getElementsByTagName("input");
    	var name = inputLables[0].value;
    	var age = inputLables[1].value;
    	// 简单数据校验	
    	if (name=="" || age=="") {
    		alert("请正确输入");
    		return;
    	}
    	// 字符串拼接
    	var str1 = "" +
    		"<tr>" +
    			"<td>" + (++id) + "</td>" +
    			"<td>" + name + "</td>" +
    			"<td>" + age + "</td>" +
    			"<td>" +
    			"<a href='javascript:;'>删除</a>" +
    			" <a href='javascript:;'>修改</a>" +
    			"</td>" +
    		"</tr>";
    	var obj = document.getElementsByTagName("tbody")[0];
    	obj.innerHTML += str1;
    }
    

    <a href='javascript:;'>删除</a> 可以看到这里 a 标签的 href 属性中使用的不是地址,而是JavaScript代码,而使用JavaScript代码是空语句,这样会使得 a 标签在点击时之后不会发生任何事情。

      方法2:DOM操作

    function add2() {
    	// 获取元素
    	var inputLabels = document.getElementsByTagName("input");
    	var name = inputLabels[0].value;
    	var age = inputLabels[1].value;
    	// 简单校验
    if (name == "" || age == "") {
    		alert("请正确输入");
    		return;
    	}
    	var new_tr;
    	var new_td;
    	new_tr = document.createElement("tr"); // 创建 tr 标签
    	
    	new_td = document.createElement("td"); // 创建 td 标签
    	new_td.innerHTML = ++id; // 将 id 添加到标签中
    	new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
    	
    	new_td = document.createElement("td"); // 创建 td 标签
    	new_td.innerHTML=name; // 将获取的 name 添加到标签中
    	new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
    
    	new_td = document.createElement("td"); // 创建 td 标签
    	new_td.innerHTML=age; // 将获取的 age 添加到标签中
    	new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
    	
    	new_td = document.createElement("td"); // 创建 td 标签
    	 // 将获取的 删除/修改 添加到标签中
    	new_td.innerHTML="<a href='javascript:delete1();'>删除</a>" +
    						" <a href='javascript:update1();'>修改</a>";
    	new_tr.appendChild(new_td); // 将 td 标签添加到 tr 标签中
    	
    	// 将 tr 标签添加到 tbody 标签中
    	document.getElementsByTagName("tbody")[0].appendChild(new_tr); 
    }
    

      方法三:前两种方法的组合

    function add3() {
    	var inputLabels = document.getElementsByTagName("input");
    	// console.log(inputLabels.length);
    	var name = inputLabels[0].value;
    	var age = inputLabels[1].value;
    	
    	var new_tr = document.createElement("tr");
    	new_tr.innerHTML = "<td>" + (++id) + "</td>" +
    						"<td>" + name + "</td>" +
    						"<td>" + age + "</td>" +
    						"<td>" +
    						"<a href='javascript:;'>删除</a>" +
    						" <a href='javascript:;'>修改</a>" +
    						"</td>";
    	
    	document.getElementsByTagName("tbody")[0].appendChild(new_tr);
    }
    

    删除数据

      还是一样,在写删除功能之前,要理清实现功能的步骤

    1. 找到需要删除的 tr 标签
    2. 将找到的 tr 标签从 table 标签中删除

      知道了需要怎么做之后,我们来完成删除数据的代码。

     方法1:

      在上面的添加数据的JavaScript代码中的删除的 a 标签中添加上一个点击事件,

    new_td.innerHTML="<a href='javascript:;' οnclick=delete1(this)>删除</a>" +
    	" <a href='javascript:update1();'>修改</a>";
    

      然后来实现一下delete1()方法

    function delete1(obj) {
    	var tr = obj.parentNode.parentNode;
    	document.getElementsByTagName("tbody")[0].removeChild(tr);
    }
    

      这个过程中,将 a 标签作为参数传到了delete1方法中,利用标签间的关系,使用parentNode属性可以找到 a 标签的父元素—— td 标签,然后再找到 td 标签的父元素,也就是我们需要删除的 tr 标签,之后使用removeChilde()方法将这个 tr 标签从 tbody 中删除即可。

      一般删除操作都会让用户确认的,所以我们加一个选择提示框。

    function delete1(obj) {
    	var tr = obj.parentNode.parentNode;
    	if (confirm("是否删除该条记录?")) {
    		document.getElementsByTagName("tbody")[0].removeChild(tr);
    	}
    }
    

      这里如果不传 this 参数的话,在 delete1() 方法中使用的 this 是 window 对象,注意和方法2区分开

     方法2:

      方法2添加事件的方式和方法1有些区别,方法1是直接在 a 标签上使用 onclick 属性添加的事件,而方法2使用对象.事件名=方法的方式为 a 标签添加事件。

    new_td.innerHTML="<a href='javascript:;'>删除</a>" +
    						" <a href='javascript:;'>修改</a>";
    new_td.getElementsByTagName("a")[0].onclick=delete2;
    

      注意!这里需要将 delete2 这个方法的定义赋给 onclick,所以不要给 delete2 加上(),加上()表示将 delete2 这个方法的返回值赋给 onclick ,这里和在标签中为属性赋值不同,在标签中为 onclick 属性赋值需要加上()

    function delete2() {
    	var tr = this.parentNode.parentNode;
    	if (confirm("是否删除该条记录?")) {
    		document.getElementsByTagName("tbody")[0].removeChild(tr);
    	}
    }
    

      注意!这里又和方法1不同,方法1中传递了 this 参数,因为调用方法1中的delete1 方法的是window对象,而方法2中则不需要传递 this 作为参数,因为调用delete2 方法的对象是 a 标签(new_td.getElementsByTagName("a")[0])

    查询数据

    在这里插入图片描述

    1. 获取需要查询的姓名
    2. 从表格中查询数据
    function select1() {
    	// 获取文本框中内容
    	var inputLabels = document.getElementsByTagName("input");
    	var name = inputLabels[2].value;
    	// 获取表格中的列
    	var trs = document.getElementsByTagName("tr");
    	var len = trs.length;
    	// 清除之前选中的记录的背景色
    	for (var i = 1; i < len; i++) {
    		trs[i].removeAttribute("style");
    	}
    	// 简单的校验
    	if (name == "") {
    		return;
    	}
    	// for 循环遍历
    	for (var i = 1; i < len; i++) {
    		if (name == trs[i].cells[1].innerHTML) {
    			// if (trs[i].cells[1].innerHTML.indexOf(name) > -1) —— 模糊查询
    			trs[i].style.backgroundColor = "red";
    		}
    	}
    }
    

      需要注意的点:

    1. for 循环的循环变量 i 是从1开始的,因为 trs[0] 是 ID、名字、年龄、操作那行;
    2. for 循环遍历中 if 条件里 name == trs[i].cells[1].innerHTML是全匹配,trs[i].cells[1].innerHTML.indexOf(name) > -1则是模糊匹配

    修改数据

    1. 获取需要修改的数据;
    2. 修改后的保存。

      获取修改前的数据,将对应的 td 标签的内容改为文本输入框以便获取修改后的数据,将操作栏中的删除、修改键改为保存键。

    function update1(obj) {
    	var thistd = obj.parentNode;
    	var agetd = thistd.previousSibling;
    	var nametd = agetd.previousSibling;
    
    	agetd.innerHTML = "<input type='text' value='" + agetd.innerText + "'/>";
    	nametd.innerHTML = "<input type='text' value='" + nametd.innerText + "'/>";
    	thistd.innerHTML = "<a href='javascript:;'>保存</a>";
    }
    

    在这里插入图片描述

     保存功能方法1

      实现保存功能

    function update1(obj) {
    	var thistd = obj.parentNode;
    	var agetd = thistd.previousSibling;
    	var nametd = agetd.previousSibling;
    	var idtd = nametd.previousSibling.innerHTML;
    	agetd.innerHTML = "<input type='text' id = 'ageid" + idtd + "' value='" + agetd.innerText + "'/>";
    	nametd.innerHTML = "<input type='text' id = 'nameid" + idtd + "'value='" + nametd.innerText + "'/>";
    	thistd.innerHTML = "<a href='javascript:;'>保存</a>";
    	thistd.childNodes[0].onclick = function() {
    		agetd.innerHTML = document.getElementById("ageid" + idtd).value;
    		nametd.innerHTML = document.getElementById("nameid" + idtd).value;
    		thistd.innerHTML = "<a href='javascript:;' οnclick=delete1(this)>删除</a> " +
    			"<a href='javascript:;' οnclick=update1(this)>修改</a>";
    	}
    }
    

      需要注意的是 input 标签 id 的书写,之所以需要用 ageid + 当前的id号 是因为可能在修改时同时修改多个记录时区分开不同记录。
    在这里插入图片描述
      input 标签的 id
    在这里插入图片描述

      另外,idtd 的书写一定要有 innerHTML,因为我们需要的不是 id 的这个单元格而是 id 单元格中的值,如果不加 innerHTML,在 input 标签的 id 处就会变成这样,达不到想要区分不同的 input 标签的作用。
    在这里插入图片描述

     保存功能方法2:

      使用getElementsById方法需要区别开不同记录的id,除了这种方法,我们还可以使用元素关系来获取内部标签,然后获取其文本

    function update2(obj) {
    	var thistd = obj.parentElement;
    	var agetd = thistd.previousSibling;
    	var nametd = agetd.previousSlbling;
    
    	agetd.innerHTML = "<input type='text' value='" + agetd.innerHTML + "' />";
    	nametd.innerHTML = "<input type='text' value='" + nametd.innerHTML + "'>";
    	thistd.innerHTML = "<a href='javascript:;'>保存</a>"
    	thistd.childNodes[0].onclick = function() {
    		agetd.innerHTML = agetd.childNodes[0].value;
    		nametd.innerHTML = nametd.childNodes[0].value;
    		thistd.innerHTML = "<a href='javascript:;' οnclick=delete1(this)>删除</a> " +
    			"<a href='javascript:;' οnclick=update1(this)>修改</a>";
    	}
    }
    

    复杂表单

      前面我们对只有输入框的简单表单进行了处理,接下来处理复杂些的表单,如下图所示。
    在这里插入图片描述
      复杂表单和简单表单的主要区别在于添加数据上,下面来看看他们的区别。

    添加数据

      对比简单表单操作来看,复杂表单的难点在于获取选中的单选框、复选框、下拉框中的文本。
      所以我们需要完成的步骤有

    1. 获取单选框、复选框、下拉框的dom对象
    2. 找到选中的标签的对象
    3. 获取选中的标签对象的文本

     获取dom对象

      这步比较简单,一般使用 name 属性来获取dom对象

    // 获取 name 属性为 favorite 的标签对象
    var obj = document.getElementsByName("favorite");
    

     找到选中的标签的对象

      想要找到选中的标签的dom对象,首先要知道被选中的标签的dom对象和没被选中的标签的dom对象有什么区别

    1. 单选框和复选框中,被选中的标签的dom对象的 checked 属性是 true,没被选中的标签的dom对象的 checked 属性是 false;
    2. 下拉框中,使用 selectedIndex 属性可以获取被选中的 option 标签的索引,使用 options 属性可以获取 select 标签下的 option 标签的对象数组。
    // 复选框示例
    // 获取复选框dom对象
    var check1 = document.getElementsByName("favorite");
    var len = check1.length;
    for (var i = 0; i < len; i++) {
    	if (check1[i].checked) {
    		// 该标签是被选中的复选框标签
    	}
    }
    // 下拉框示例
    // 获取下拉框dom对象
    var select1 = document.getElementsByTagName("select")[0];
    // 获取下拉框中被选中的 option 的索引
    var index = select1.selectedIndex;
    // 获取下拉框中 option 的dom对象
    var optionObj = select1.options;
    // 获取下拉框中被选中的 option 的dom对象
    var selectedOption = optionObj[index];
    

     获取单选框和复选框的文本

      获取文本首先要明白,需要获取文本和当前单选框标签或者复选框标签之间的关系。
      需要获取的文本是单选框标签或者复选框标签的兄弟标签,所以使用 nextSibling 属性和 textContent 属性获取。

    <input type="checkbox" name="test1" id="" value="0" /> 篮球
    <input type="checkbox" name="test1" id="" value="1" /> 游戏
    <input type="checkbox" name="test1" id="" value="2" /> 音乐
    <input type="checkbox" name="test1" id="" value="3" /> 其他
    
    function test1() {
    	var check = document.getElementsByName("test1");
    	var len = check.length;
    	var str = "";
    	for (var i = 0; i < len; i++) {
    		if (check[i].checked) {
    			console.log(check[i].nextSibling.textContent)
    			str += check[i].nextSibling.textContent.trim() + " ";
    		}
    	}
    	return str;
    }
    

      如果使用了 label 标签包含 input 标签的形式,可以使用 parentNode 属性找到 label 标签,然后使用 textContent属性 获取文本

    <label><input type="checkbox" name="test2" id="" value="0" /> 篮球</label>
    <label><input type="checkbox" name="test2" id="" value="1" /> 游戏</label>
    <label><input type="checkbox" name="test2" id="" value="2" /> 音乐</label>
    <label><input type="checkbox" name="test2" id="" value="3" /> 其他</label>
    
    function test2() {
    	var check = document.getElementsByName("test2");
    	var len = check.length;
    	var str = "";
    	for (var i = 0; i < len; i++) {
    		if (check[i].checked) {
    			str += check[i].parentNode.textContent;
    		}
    	}
    	// console.log(str);
    	return str;
    }
    

      textContent属性只获取文本,不获取标签。

    展开全文
  • js+html写的实现表格的动态增删改查和表单验证
  • 主要介绍了Vue+Mock.js模拟登录和表格增删改查功能,需要的朋友可以参考下
  • 原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
  • 现在在F盘有文件abc.mdf,表名为Student,一共2个字段,Id数字类型主键,stuName文本类型,现对该表进行增删改查的操作: 1.查询 代码如下: <HTML> <HEAD> <TITLE>数据查询</TITLE> ...
  • 说在前面的,写给小白白的,大神请绕道~今天用原生js写一下动态表格增删改查,主要是熟悉一下js的DOM操作。首先,做一个表格,用来显示提交的数据,如图下:此处,我添加了编号、姓名、密码、生日、地址五个属性,...

    说在前面的,写给小白白的,大神请绕道~

    今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作。

    首先,做一个表格,用来显示提交的数据,如图下:

    47ccc82757f74d46d3d5c8a3e44dd172.png

    此处,我添加了编号、姓名、密码、生日、地址五个属性,另外加选中、操作两个操作,亲们可以自行添加,布局代码如下:

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    选中编号姓名密码生日地址操作全部删除

    100806131234劈日e斩月1234561995-08-07北京市朝阳区艾欧尼亚

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    css方面我运用了bootstrap的表格框架,图个方便,觉得不好看的,大家自行修改,在此就展示了。

    然后,下面添加一个需要提交的表单,如图下:

    6642e1f796860463f9e886cadd08b059.png

    生日选项用了h5新属性date,

    布局代码如下:

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    新增数据

    编号
    姓名
    密码
    生日
    地址

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    基本布局就这样了,然后可以写脚本了,

    1.添加数据

    思路:获取表单每个input的value值,然后创建节点td,添加到上面的表格当中,很简单,代码实现如下:

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    function addList(){

    var oNum = document.getElementById('num').value;

    var oUser = document.getElementById('username').value;

    var oPwd = document.getElementById('pwd').value;

    var oBirth = document.getElementById('birth').value;

    var oAddre = document.getElementById('addre').value;

    var oTr = document.createElement('tr');

    var oTd1 = document.createElement('td');

    var oInput = document.createElement('input');

    oTd1.appendChild(oInput);

    oInput.setAttribute('type','checkbox');

    oInput.setAttribute('name','item');

    var oTd2 = document.createElement('td');

    oTd2.innerHTML = oNum;

    var oTd3 = document.createElement('td');

    oTd3.innerHTML = oUser;

    var oTd4 = document.createElement('td');

    oTd4.innerHTML = oPwd;

    var oTd5 = document.createElement('td');

    oTd5.innerHTML = oBirth;

    var oTd6 = document.createElement('td');

    oTd6.innerHTML = oAddre;

    var oTd7 = document.createElement('td');

    var oInput2 = document.createElement('input');

    var oInput3 = document.createElement('input');

    oInput2.setAttribute('type','button');

    oInput2.setAttribute('value','删除');

    oInput2.setAttribute('onclick','del(this)');

    oInput2.className = 'btn btn-danger';

    oInput3.setAttribute('type','button');

    oInput3.setAttribute('value','修改');

    oInput3.setAttribute('onclick','modify(this)');

    oInput3.className = 'btn btn-info';

    oTd7.appendChild(oInput2);

    oTd7.appendChild(oInput3);

    oTr.appendChild(oTd1);

    oTr.appendChild(oTd2);

    oTr.appendChild(oTd3);

    oTr.appendChild(oTd4);

    oTr.appendChild(oTd5);

    oTr.appendChild(oTd6);

    oTr.appendChild(oTd7);

    var olistTable = document.getElementById('listTable');

    olistTable.appendChild(oTr);

    }

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    注意:创建节点的时候,相关的属性值,样式,事件同步一下,我这直接设置的点击函数,这样就可以添加了,如图下:

    dca8c5cf43dd4f775e1a22f651feb8eb.png

    2.删

    1)单点对应删除

    思路:添加数据的时候,需要添加对应的点击事件οnclick=del(this),然后removeChild移除。实现代码如下:

    function del(obj){

    var oParentnode = obj.parentNode.parentNode;

    var olistTable = document.getElementById('listTable');

    olistTable.removeChild(oParentnode);

    }

    2)多项删除(全部删除)

    思路:通过checkbox的checked属性当做开关,然后通过遍历删除checked=true对应的tr行。代码如下:

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    //全选

    function checkAll(c){

    var status = c.checked;

    var oItems = document.getElementsByName('item');

    for(var i=0;i

    oItems[i].checked=status;

    }

    }

    //delAll功能

    function delAll(){

    var olistTable = document.getElementById('listTable');

    var items = document.getElementsByName("item");

    for(var j=0;j

    if(items[j].checked)//如果item被选中

    {

    var oParentnode = items[j].parentNode.parentNode;

    olistTable.removeChild(oParentnode);

    j--;

    }

    }

    }

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    如图下:

    7d4afe93dded4b196235a9475a603f5f.gif

    3.修改数据

    思路:点击“修改”后,将td的innerHTML值传到表单中的input当中,同时用一个参数记录下点击的行数rowIndex,"更新"按钮先找见需要修改的行数的Tr,然后将表单的值传给每个td;代码实现如下:

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    //修改功能

    function modify(obj){

    var oNum = document.getElementById('num');

    var oUser = document.getElementById('username');

    var oPwd = document.getElementById('pwd');

    var oBirth = document.getElementById('birth');

    var oAddre = document.getElementById('addre');

    var oTr = obj.parentNode.parentNode;

    var aTd = oTr.getElementsByTagName('td');

    rowIndex = obj.parentNode.parentNode.rowIndex;

    oNum.value = aTd[1].innerHTML;

    oUser.value = aTd[2].innerHTML;

    oPwd.value = aTd[3].innerHTML;

    oBirth.value = aTd[4].innerHTML;

    oAddre.value = aTd[5].innerHTML;

    console.log(aTd[4].innerHTML);

    //alert(i);

    }

    //更新功能

    function update(){

    var oNum = document.getElementById('num');

    var oUser = document.getElementById('username');

    var oPwd = document.getElementById('pwd');

    var oBirth = document.getElementById('birth');

    var oAddre = document.getElementById('addre');

    var oMytable = document.getElementById('mytable');

    //alert(rowIndex);

    //var aTd = rowIndex.cells;

    console.log(oMytable.rows[rowIndex].cells)

    oMytable.rows[rowIndex].cells[1].innerHTML = oNum.value;

    oMytable.rows[rowIndex].cells[2].innerHTML = oUser.value;

    oMytable.rows[rowIndex].cells[3].innerHTML = oPwd.value;

    oMytable.rows[rowIndex].cells[4].innerHTML = oBirth.value;

    oMytable.rows[rowIndex].cells[5].innerHTML = oAddre.value;

    }

    67d0865f17d9be527254bf8a8ff6c5b4.gif

    实现效果如图下:

    fb26c76e91748c106194a8f29aedd94b.gif

    js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

    原生js对cookie的增删改查

    一.增 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path ...

    jQuery EasyUI&sol;TopJUI实现数据表格的增删改查功能(不写js&comma;纯HTML实现&excl;&excl;&excl;)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码

    Vue&plus;Mock&period;js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

    快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面:

    Angularjs中表格的增删改查

    在一个管理系统中,不外乎都是增删改查.现在比如有个表格,我想修改当前行的数据,如下图所示 一点击修改的时候,当前页面我需要修改的数据,变成能修改的样式,点击保存能保存当前修改的数据,如下图所示 需要引 ...

    随机推荐

    EPEL源

    EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适用于RHEL.CentOS和Scientif ...

    Java基础-JVM类加载机制

    JVM的类加载是通过ClassLoader及其子类来完成的,类的层次关系和加载顺序可以由下图来描述: 1)Bootstrap ClassLoader /启动类加载器 $JAVA_HOME中jre/li ...

    Spring报错——Scope &&num;39&semi;session&&num;39&semi; is not active for the current thread

    在对程序进行了一些修改后,运行发现spring报了这个错误,这是由于我设置了一个@Scope("session")导致的,现记录下解决方法. 解决方法: 将Scope设置为scop ...

    微信小程序入门一

    基本的准备工作 -知识储备 --基础:HTML+JS+CSS --进阶:React.Vue -工具安装 --工具由微信官方提供 ---下载地址:https://github.com/zce/weapp ...

    拾人牙慧篇之——基于HTML5中websocket来实现消息推送功能

    一.写在前面 要求做一个,后台发布信息,前台能即时得到通知的消息推送功能.网上搜了也有很多方式,ajax的定时询问,Comet方式,Server-Sent方式,以及websocket.表示除了定时询问 ...

    通过ViewPager 实现图片轮播

    通过ViewPager 实现图片轮播 首先来个效果图 布局文件: LinearLayout 用来存放下方的几个小白点. <?xml version="1.0" encodin ...

    HDU 1236 排名(Microsoft&lowbar;zzt)

    http://acm.hdu.edu.cn/showproblem.php?pid=1236 Problem Description 今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完 ...

    【工具测试】Acunetix 11-登录后扫描的功能

    1.概要 在测试的过程中,会给一些只有登录口的测试站点,只有登录后才能访问更多的页面. Acunetix 11的登录后扫描功能摸索了老半天,原来这么神奇.学习了! 2.操作 登录之后 - [Add T ...

    table中background背景图片自动拉伸

    展开全文
  • js实现table表格增删改查

    千次阅读 2020-12-01 17:39:28
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0;... line-height: 40p.

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			th{
    				width: 250px;
    				height: 40px;
    				text-align: center;
    				line-height: 40px;
    				border: 1px solid lightgray;
    			}
    			td{
    				width: 250px;
    				height: 40px;
    				text-align: center;
    				line-height: 40px;
    				border: 1px solid lightgray;
    			}
    			table{
    				margin-top: 15px;
    			}
    			.bian1{
    				background: lightgray;
    			}
    			.bian2{
    				background: dodgerblue;
    			}
    			.aa{
    				background: lightgray;
    			}
    			.aaa{
    				background: red;
    			}
    			.gai1{
    				background: green;
    			}
    		</style>
    	</head>
    	<body>
    		姓名:<input type="text" />
    		年龄:<input type="text" />
    		爱好:<input type="text" />
    		<button>添加</button>
    		<input type="text" />
    		<button>查找</button>
    		<input type="text" />
    		<button>修改</button>
    		<table cellpadding="0" cellspacing="0">
    			<thead class="bian1">
    				<th>姓名</th>
    				<th>年龄</th>
    				<th>爱好</th>
    				<th>操作</th>
    			</thead>
    		</table>
    	</body>
    	<script>
    		var tab = document.getElementsByTagName("table")[0]
    		var tr = document.getElementsByTagName("tr")
    		var td = document.getElementsByTagName("td")
    		var xm = document.getElementsByTagName("input")[0]
    		var nl = document.getElementsByTagName("input")[1]
    		var ah = document.getElementsByTagName("input")[2]
    		var tj = document.getElementsByTagName("button")[0]
    		var cha = document.getElementsByTagName("input")[3]
    		var zhao = document.getElementsByTagName("button")[1]
    		var xiu = document.getElementsByTagName("input")[4]
    		var gai = document.getElementsByTagName("button")[2]
    		tj.onclick = function(){
    //			alert("aaa")
    			if(xm.value==""){
    				alert("请输入姓名")
    			}else if(nl.value == ""){
    				alert("请输入年龄")
    			}else if(ah.value==""){
    				alert("请输入爱好")
    			}else{
    				var tr1 = document.createElement("tr")
    				var td1 = document.createElement("td")
    				var td2 = document.createElement("td")
    				var td3 = document.createElement("td")
    				var td4 = document.createElement("td")
    				tr1.appendChild(td1)
    				tr1.appendChild(td2)
    				tr1.appendChild(td3)
    				tr1.appendChild(td4)
    				tab.appendChild(tr1)
    				td1.innerHTML = xm.value
    				td2.innerHTML = nl.value
    				td3.innerHTML = ah.value
    				td4.innerHTML = "<button class='sc'>删除</button>"
    				xm.value = ""
    				nl.value = ""
    				ah.value = ""
    				
    				
    				ghbs()
    				
    				
    //				单行删除
    				var sc = document.getElementsByClassName("sc")
    				for(var i=0; i<sc.length;i++){
    					sc[i].onclick = function(){
    //						console.log(this)
    						this.parentNode.parentNode.remove()
    						ghbs()
    					}
    				}
    				
    //				查找
    				zhao.onclick = function(){
    //					alert("aaa")
    					var zhi1 = cha.value
    //					console.log(zhi1)
    					for(var i=0; i<td.length;i++){
    						if(td[i].innerHTML.indexOf(zhi1)!=-1){
    //							console.log(td[i])
    							for(var j=0; j<td.length;j++){
    								td[j].parentNode.className = "bbb"
    							}
    							td[i].parentNode.className = "aaa"
    						}
    					}
    				}
    				
    				
    				
    //				修改
    				for(var i=0; i<td.length;i++){
    					td[i].onclick = function(){
    						for(var j=0;j<td.length;j++){
    							td[j].className = "gai2"
    						}
    						this.className = "gai1"
    					}
    				}
    				
    				gai.onclick = function(){
    					var zhi2 = xiu.value
    					for(var i=0; i<td.length; i++){
    						if(td[i].className=="gai1"){
    //							console.log(td[i])
    							td[i].innerHTML = zhi2
    							td[i].className = "gai2"
    							ghbs()
    						}
    					}
    				}
    				
    			}
    			
    			
    			
    			
    			
    			function ghbs(){
    				for(var i=0; i<tr.length;i++){
    					if(i%2==0){
    						tr[i].className = "bian1"
    					}else{
    						tr[i].className = "bian2"
    					}
    				}
    			}
    			
    		}
    	</script>
    </html>
    
    

    很简单的一个小demo

    展开全文
  • 公司实习生问我table的增删操作,用jQuery很简单的实现了。又问我不使用jQuery,只使用js如何实现。 面对这种情况,我的一贯做法是‘不理解,但是支持’。 jQuery用的多了,人也懒了,但还是用js实现了这一操作,...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...对表格操作</title> <style type="text/css"> *{ padding:0px; margn:0px; } table#stuRe...
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>对表格操作</title>
    <style type="text/css">
        *{
        padding:0px;
        margn:0px;
        }
        table#stuRecordTable{width:600px;margin:40px auto;text-align: center;}
        table#stuRecordTable tr{height:30px;}
    </style>
    <script type="text/javascript">
        function $(eleStr){
            switch(eleStr.substr(0,1)){
            case "#":
                return document.getElementById(eleStr.substr(1));
                break;
            case ".":
                return document.getElementsByClassName(eleStr.substr(1));
                break;
            case "_":
                return document.getElementsByName(eleStr.substr(1));
                break;
            default:
                return document.getElementsByTagName(eleStr);
            break;
            }
        }
    
        onload = function(){
    
            doOperator();       
        }
    
        function doOperator(){
    
            var updates =$(".update");
            var dels =$(".del");
            for (var i = 0; i < dels.length; i++) {
                dels[i].onclick =   function(){
                    if(confirm("是否确定删除?")){  //提示是否删除
                        //var row = this.parentNode.parentNode; //取到tr对象
                        //row.parentNode.removeChild(row);  //移除tr
                        $("#stuRecordTable").deleteRow(this.parentNode.parentNode.rowIndex);
                    }
                }
                updates[i].onclick = function(){
                    var operatorCell = this.parentNode.parentNode.getElementsByTagName("td")[1]; //取到要操作的td对象
                    //1.修改按钮上有两个功能:修改,确定修改
                    if(this.value == "修改"){
                        this.value = "确定";
                        operatorCell.innerHTML ="<input value='"+operatorCell.innerHTML+"'/>";//把内容变成文本框
                        //做修改操作
                    }else{
                        operatorCell.innerHTML =operatorCell.getElementsByTagName("input")[0].value;//把文本框变成内容
                        this.value = "修改";
                        //做确定修改
                    }
                }
            }
        }
        function addRow(){
            var rs = $("#stuRecordTable").rows;  //table取到所有的行
            var insertR = $("#stuRecordTable").insertRow(rs.length-1); //给表格添加一行(不包单元格)
            //insertR.innerHTML = rs[1].innerHTML;    
            var c1 = insertR.insertCell(0);       
            c1.innerHTML = "yc" +Math.round(Math.random() * 101);
            var c2 = insertR.insertCell(1);
            c2.innerHTML = Math.round(Math.random() * 101);
            var c3 = insertR.insertCell(2);
            c3.innerHTML ='<input type="button" value="删除" class="del"/><input type="button" value="修改" class="update"/>';
    
            doOperator();
    
            var cs = rs[1].cells; //取到当前行的所有单元格
            //alert(cs[1].innerHTML);
        }
    </script>
    </head>
    <body>
        <table id="stuRecordTable" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>姓名</th> 
                <th>成绩</th>
                <th>编辑</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>90</td>
                <td><input type="button" value="删除" class="del"/>
                <input type="button" value="修改" class="update"/></td>
            </tr>
            <tr>
                <td>小红</td>
                <td>80</td>
                <td><input type="button" value="删除" class="del"/>
                <input type="button" value="修改" class="update"/></td>
            </tr>
            <tr>
                <td colspan="3">
                <input type="button" value="添加" onclick="addRow()"/></td>
            </tr>
        </table>
    </body>
    </html>
    复制代码
    展开全文
  • 这是我自己做的2个例子,里面是用JXL这个第三方控件来实现了java对excel表格的操作,里面写的很详细,而且jxl.jar包我也放在里面了,大家直接拷贝我的代码就可以用了
  • [Java教程]js实现表格增删改查0 2017-01-12 00:06:43这份代码实现了对表格的增加,删除,更改,查询。点击一次添加按钮,表格会增加一行。点击重置按钮,输入框的内容会被清空。添加一行后,最后两格为更改和删除...
  • 前两篇文章主要介绍了类和对象、类的继承,如果想了解更多理论请查阅《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象...抽像对象: Tab对象 (增删改查功能)实现功能效果如下图:首先建立一个class 类Tab: let t
  • 第三步在main.js里面引入刚刚我们写好的src/mock/index.jsimport './mock' // simulation data 路径index.js可省略 至此整合完毕 相关文章: 相关视频: 以上就是Vue+Mock.js实现模拟表格增删改查详细步骤的详细...
  • 主要介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 功能: 新增表格数据, 修改表格数据, 删除表格数据。 不完善区: 删除数据之后序号没有做处理 ,表单验证简单的提示警告, 没有文字提醒。 界面: 在线查看 下面是代码: &lt;!DOCTYPE html&gt; &...
  • 利用原生js制作的仿后端数据表,基本功能实现,详情请看博文
  • react实例-增删改查 人员管理系统 有编译后的可直接运行的html文件,也有react组件后的js文件
  • 多,这里大概列举几个常见的   ...  解析:如果写到了外部,name获取...(2)实现全选全不选 var checkBoxs = document.getElementsByName("del"); var status = me.checked; for (var i = 0; i &lt
  • JS+HTML+CSS实现表格增删改查翻页--模板文件管理

    千次阅读 多人点赞 2020-02-20 20:59:20
    JS+HTML+CSS实现简单表格增删改查
  • JS+HTML简单表格增删改查

    万次阅读 多人点赞 2018-07-17 20:33:11
    首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。 里面的功能十分的简陋,对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接:https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,106
精华内容 4,042
关键字:

js实现表格的增删改查