表格添加一行，点删除删掉这一行
例子1：
html代码：
| 编号 | 姓名 | 性别 | 年龄 | 操作 |
|---|---|---|---|---|
| 1 | 张三 | 男 | 20 |
显示为：
js代码： var addbtn=null;//找到添加按钮var tab1=null;//点击添加方法window.οnlοad=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代码：：
姓名：年龄：//添加按钮
| ID | 姓名 | 年龄 | 操作 |
|---|
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");//创建标签 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 = ""; } 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 结果
隔行变色
移入变色
例子3：
html代码：
| 编号 | 姓名 | 性别 | 年龄 | 操作 |
|---|---|---|---|---|
| 1 | 张三 | 男 | 20 |
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 结果：
计算器
html代码：
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代码：js代码：
var inputs = [];window.onload = function(){ inputs = document.getElementById('inputs').getElementsByTagName('input');}function qxqbx(flag){ /*找到复选框 找到选中状态 设为选中*/ for(var i =0;i