表格元素的添加和删除，计算器，全选全不反选

最新推荐文章于 2021-02-26 00:21:20 发布

转载最新推荐文章于 2021-02-26 00:21:20 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lzw123-/p/9245167.html

本文介绍如何使用HTML和JavaScript实现表格的动态增删行功能，并附带隔行变色、鼠标移入变色等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格添加一行，点删除删掉这一行

例子1：

html代码：

<button id = "add1" >添加一行</button>
<table id="tab" width="100%" border="1" cellpadding="0" cellspacing="0">
	<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>20</td>
			<td>
				<button onClick="delTr(this)">删除</button>
				
			</td>
		</tr>
</table>

显示为：

js代码：

var addbtn=null;//找到添加按钮
var tab1=null;

//点击添加方法
window.onload=function(){
    tab1= document.getElementById('tab');//获取表格
    var add1btn = document.getElementById('add1');//获取按钮
　　//点击添加事件
    add1btn.onclick = function (){
    
        var trplus = document.createElement('tr');//添加标签，新建一行
        for (var i = 0; i <= 4; i++) {
			var tdplus = document.createElement('td');//新建一个单元格
			if(i<=3){
				
            	tdplus.innerHTML = 123;
			}else{
				var btn =document.createElement("button");
				btn.innerHTML ="删除";
				tdplus.appendChild(btn);
				btn.onclick = function(){
					btn.parentNode.parentNode.remove();
				}
			}
            
            trplus.appendChild(tdplus);//将新建的td添加到tr中
        }

        tab1.appendChild(trplus);//将新建的tr添加到table中

    }
	
	
}

结果例子显示：

例子2：

html代码：：

姓名：<input id="mingzi" type="text" placeholder="必填">
年龄：<input id="age" type="text" placeholder="必填">
<button onClick="add()">添加一行</button>//添加按钮
<button onClick="color()">隔行变色</button>
<button onClick="yrbs()">移入变色</button>
<table width="1000" border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
</table>

js代码：

var tab=null;//获取表格
var tr_push=[];//添加行
var td_push=[];//添加单元格
var namedom=null;//添加姓名
var agedom=null;//添加年龄
var tr = null;//
var th = null;

window.onload = function () {
    tab=document.getElementsByTagName("table")[0];//获取表格
    tr=document.getElementsByTagName("tr");
    th=document.getElementsByTagName("th");
    namedom=document.getElementById("mingzi");
    agedom=document.getElementById("age");	
	
}
//功能：添加行
function add(){
     tr_push = document.createElement("tr");//创建<tr>标签
    for (var i = 0; i < th.length; ++i) { 
		//第一列的内容ID，排序，为tr的长度
        if (i == 0) {
            td_push = document.createElement("td");
            td_push.innerHTML = tr.length;

        }
		//第二列的内容姓名，为提取姓名框的内容
        if (i == 1) {
            td_push = document.createElement("td");
            td_push.innerHTML = namedom.value;

        }
		//第三列的内容年龄，为提取年龄框的内容
        if (i == 2) {
            td_push = document.createElement("td");
            td_push.innerHTML = agedom.value;

        }
		//第四列，删除按钮
		//将一个button标签作为i=3的内容
		//点击时，调用方法删除
        if (i == 3) {
            td_push = document.createElement("td");
            td_push.innerHTML = "<button onClick='shan(this)'>删除</button>";

        }
        tr_push.appendChild(td_push);//将新建td添加到tr中
    }
    tab.appendChild(tr_push);  //将新建tr添加到tab中  
}
/*功能：删除行*/
function shan(obj) {
    obj.parentNode.parentNode.remove();
//移除button所在标签的父标签的父标签（tr）

}
/*功能：隔行变色*/
function color(){
    for(var i = 0; i < tr.length; i=i+2){
//隔行变色，所以    i=i+2
    tr[i].style.background = "red";    
//给tr添加样式background     
	}
}
/*鼠标移入变色 移出变回原色*/
function yrbs(){
    for(var i =0;i<tr.length;i++){
            tr[i].setAttribute('onMouseOver','cl(this,"")');
//鼠标放上时，调用方法cl()
            tr[i].setAttribute('onMouseOut','cl(this,"out")');
//鼠标移开时，调用方法cl() ,加参数"out"
    }
}

function cl(obj,type){
//定义this=obj,实参type
    for(var i =0;i<tr.length;++i){
        tr[i].style.backgroundColor = "white";
//先把所有的定义为白色
    }
    if(type != "out"){
//当type不等于out时，该行变绿色
        obj.style.backgroundColor = "green";
    }
}

结果

　　隔行变色

　　移入变色

例子3：

html代码：

<button onClick="addTr()">添加一行</button>
	<table id="tab" width="100%" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>20</td>
			<td>
				<button onClick="delTr(this)">删除</button>
				
			</td>
		</tr>
	</table>

js代码：

var tab = null; //表格对象
var dataArr = [
	[2,"李四","男","12"],
	[3,"李四3","男","12"],
	[4,"李四","男","12"],
	[5,"李四","男","12"]
];

window.onload = function(){
	initVal();
	addTr();
	delTr();
}

function initVal(){
	tab = document.getElementById('tab');
}
function addTr(){
	var tt = new Date();

	var trDom = document.createElement('tr');
	trDom.setAttribute('data',tt.getTime());
	//获得th长度  得到循环次数
	var tdLength = document.getElementsByTagName('th').length;
	
	for(var i =0;i<(tdLength-1);++i){
		var tdDom = document.createElement('td');
		tdDom.innerHTML = dataArr[1][i];
		trDom.appendChild(tdDom);
	}
	
	var tdDom2 = document.createElement('td');

	var btnDom = document.createElement('button');
	btnDom.innerHTML = "删除";
	btnDom.setAttribute('data',tt.getTime());
	btnDom.setAttribute('onClick','delTr(this)');
	
	tdDom2.appendChild(btnDom);
	
	trDom.appendChild(tdDom2);
	tab.appendChild(trDom);
}
//根据时间找元素判断
function delTr(obj){
	var zhi = obj.getAttribute('data');
	var trArr = document.getElementsByTagName('tr');
	for(var i =0;i<trArr.length;++i){
		if(trArr[i].getAttribute('data') == zhi ){
			trArr[i].remove();
			break;
		}	
	}
}

结果：

计算器

html代码：

<input type="text">
<select name="" id="">
	<option>+</option>
	<option>-</option>
	<option>*</option>
	<option>/</option>
	<option>%</option>
</select>
<input type="text">
<button onclick="jisuan()">=</button>
<input type="text" placeholder="结果">

js代码：

var inputs = null;//文本框
var input1 = null;//第一个文本框
var input2 = null;//第二个文本框
var select1 = null;//第一个下拉
var input3 = null;//结果文本框

window.onload = function(){
	initVal();
}

function initVal(){
	select1 = document.getElementsByTagName('select')[0];
	inputs = document.getElementsByTagName('input');
	input1 = inputs[0];
	input2 = inputs[1];
	input3 = inputs[2];
}

function jisuan(){
	input3.value = eval(input1.value + select1.value + input2.value);
}

结果演示：

全选，全不选，反选：
html代码：

　　<!--全选全不选-->
	<p id="inputs">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
	</p>

	<button onClick="qxqbx(true)">全选</button>
	<button onClick="qxqbx(false)">全不选</button>
	<button onClick="fx()">反选</button>

js代码：

var inputs = [];
window.onload = function(){
	inputs = document.getElementById('inputs').getElementsByTagName('input');
}
function qxqbx(flag){
	/*找到复选框  找到选中状态  设为选中*/
	for(var i =0;i<inputs.length;++i){
		inputs[i].checked = flag;
	}
	
}

function fx(){
	for(var i =0;i<inputs.length;++i){
		if(inputs[i].checked == true){
			inputs[i].checked = false;
		}else{
			inputs[i].checked = true;
		}
	}
}

转载于:https://www.cnblogs.com/lzw123-/p/9245167.html