A DOM高级 04 表格添加行
来源：互联网 发布：gitlab runner node 编辑：程序博客网 时间：2024/06/01 09:27
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="添加"/>
<table id="table1" border="1px" width="400px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>大卡</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>leo</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function()
{
var oTab=document.getElementById("table1");
var oBtn=document.getElementById("btn1");
var oTxt=document.getElementById("txt1");
oBtn.onclick=function()
{
var oTr=document.createElement("tr");
var oTd=null;
oTd=document.createElement("td");
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML=oTxt.value;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML="删除";
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
color();
};
/*=================高亮============================*/
color();
function color()
{
var i=0;
var oldColor;
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";//给双行添加背景
oTab.tBodies[0].rows[i].index=i;
oTab.tBodies[0].rows[i].onmouseover=function()
{
oldColor=this.style.backgroundColor;//保存原来的背景颜色
this.style.background="yellow";
};
oTab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=this.index%2?oldColor:"";//恢复
};
}
}
};
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="添加"/>
<table id="table1" border="1px" width="400px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>大卡</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>leo</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function()
{
var oTab=document.getElementById("table1");
var oBtn=document.getElementById("btn1");
var oTxt=document.getElementById("txt1");
oBtn.onclick=function()
{
var oTr=document.createElement("tr");
var oTd=null;
oTd=document.createElement("td");
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML=oTxt.value;
oTr.appendChild(oTd);
oTd=document.createElement("td");
oTd.innerHTML="删除";
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
color();
};
/*=================高亮============================*/
color();
function color()
{
var i=0;
var oldColor;
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";//给双行添加背景
oTab.tBodies[0].rows[i].index=i;
oTab.tBodies[0].rows[i].onmouseover=function()
{
oldColor=this.style.backgroundColor;//保存原来的背景颜色
this.style.background="yellow";
};
oTab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=this.index%2?oldColor:"";//恢复
};
}
}
};
</script>
</body>
</html>
1 1
- A DOM高级 04 表格添加行
- A. DOM高级 05 表格删除行
- A DOM高级 03 表格隔行变色
- A. DOM高级06 表格搜索01
- 24、DOM的高级应用1-------表格的动态删除和添加行的操作
- A. DOM高级 01表格的快速操作
- A. DOM高级 02 表格鼠标经过高亮
- dom添加表格
- DOM高级应用——表格元素的添加、删除、搜索操作1
- DOM动态添加，删除表格
- Dom操作 表格的添加行，删除行，修改行，
- Dom 表格行变色
- （29）使用DOM添加表格数据
- 25、DOM的高级应用2-------表格内容的排序
- JS@DOM：向表格中动态添加行显示信息，做到滚动效果
- 用dom追加实现添加表格每一行
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- 动态添加表格行
- A DOM高级 03 表格隔行变色
- 第13周 《C++语言基础》程序阅读——多态性与抽象类 （1）
- Unity处理Hierarchy面板上的一些特殊的对象的特殊标识
- 为什么采用using namespace std不是一个好主意
- Monkey for iOS
- A DOM高级 04 表格添加行
- 黑马程序员—C重点--运算符
- java之新特性总结
- ACM-简单的输入输出（茵茵的第一课）
- 初学nodejs，搭建简单架构
- Appium IOS 真机测试 iphone
- 【php】利用php的构造函数与析构函数编写Mysql数据库查询类
- 第十一周项目三 点类派生直线类
- 第12周项目1-教师兼干部类
