表格元素的添加和删除，计算器，全选全不反选
表格添加一行，点删除删掉这一行
例子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;
}
}
}
