JS DOM之表格操作
一个能给添加行的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table{width:100%; border:1px solid #eee; border-collapse:collapse;}
.table > tbody > tr{}
.table > tbody > tr > td{text-align:center; border:1px solid #eee;}
</style>
<script>
window.onload = function(){
var testTable = document.getElementById("testTable");
var testBtn = document.getElementById("testBtn");
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2"); testBtn.onclick = function(){
var oTr = document.createElement("tr"); var oTd1 = document.createElement("td");
oTd1.innerHTML = testTable.tBodies[0].rows.length + 1;
oTr.appendChild(oTd1); var oTd2 = document.createElement("td");
oTd2.innerHTML = test1.value;
oTr.appendChild(oTd2); var oTd3 = document.createElement("td");
oTd3.innerHTML = test2.value;
oTr.appendChild(oTd3); testTable.tBodies[0].appendChild(oTr);
};
};
</script>
</head> <body>
test1:<input id="test1" type="text" />
test2:<input id="test2" type="text" />
<input id="testBtn" type="button" value="ADD" />
<table class="table" id="testTable">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
一个能添加行又能删除行的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table{width:100%; border:1px solid #eee; border-collapse:collapse;}
.table > tbody > tr{}
.table > tbody > tr > td{text-align:center; border:1px solid #eee;}
</style>
<script>
window.onload = function(){
var testTable = document.getElementById("testTable");
var testBtn = document.getElementById("testBtn");
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var id = testTable.tBodies[0].rows.length + 1; testBtn.onclick = function(){
var oTr = document.createElement("tr"); var oTd1 = document.createElement("td");
oTd1.innerHTML = id;
id++;
oTr.appendChild(oTd1); var oTd2 = document.createElement("td");
oTd2.innerHTML = test1.value;
oTr.appendChild(oTd2); var oTd3 = document.createElement("td");
oTd3.innerHTML = test2.value;
oTr.appendChild(oTd3); var oTd4 = document.createElement("td");
oTd4.innerHTML = '<a href="javascript:;">delete</a>';
oTr.appendChild(oTd4); oTd4.getElementsByTagName("a")[0].onclick = function(){
testTable.tBodies[0].removeChild(this.parentNode.parentNode);
}; testTable.tBodies[0].appendChild(oTr);
};
};
</script>
</head> <body>
test1:<input id="test1" type="text" />
test2:<input id="test2" type="text" />
<input id="testBtn" type="button" value="ADD" />
<table class="table" id="testTable">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
一个能搜索的表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table{width:100%; border:1px solid #eee; border-collapse:collapse;}
.table > tbody > tr{}
.table > tbody > tr > td{text-align:center; border:1px solid #eee;}
</style>
<script>
window.onload = function(){
var testTable = document.getElementById("testTable");
var txt = document.getElementById("s_text");
var btn = document.getElementById("search"); btn.onclick = function(){
for(var i=0;i<testTable.tBodies[0].rows.length;i++){
if(testTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase() == txt.value.toLowerCase()){
testTable.tBodies[0].rows[i].style.background = "yellow";
}else{
testTable.tBodies[0].rows[i].style.background = "";
}
}
}; };
</script>
</head> <body>
test:<input id="s_text" type="text" />
<input id="search" type="button" value="Search" />
<table class="table" id="testTable">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td></td>
</tr>
<tr>
<td>test4</td>
<td>test5</td>
<td>test6</td>
<td></td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td></td>
</tr>
<tr>
<td>test4</td>
<td>test5</td>
<td>test6</td>
<td></td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
除此之外还可以使用search()进行模糊搜索，用split()进行多关键词搜索。
我们可以对表格提供排序服务，我们可以模拟一个List，Table和它的写法一样。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.table{width:100%; border:1px solid #eee; border-collapse:collapse;}
.table > tbody > tr{}
.table > tbody > tr > td{text-align:center; border:1px solid #eee;}
</style>
<script>
window.onload = function(){
var nl = document.getElementById("numberList");
var btn = document.getElementById("order"); btn.onclick = function(){
var aLi = nl.getElementsByTagName("li"); var arr = []; for(var i=0;i<aLi.length;i++ ){
arr[i] = aLi[i];
} arr.sort(function(l1,l2){
var n1 = parseInt(l1.innerHTML);
var n2 = parseInt(l2.innerHTML); return n1 - n2;
}); for(var i=0;i<arr.length;i++){
nl.appendChild(arr[i]);
}
};
};
</script>
</head> <body>
<input id="order" type="button" value="Order" />
<ul id="numberList">
<li>21</li>
<li>88</li>
<li>45</li>
<li>17</li>
<li>3</li>
</ul>
</body>
</html>
JS DOM之表格操作的更多相关文章
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- JS DOM元素的操作（创建，添加，删除，和修改属性）
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- 采用DOM进行表格的修改操作
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- DOM表格操作
注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择 表格操作用到的属性: 1.tHead 2.tBodies 3.tFoot 更为细致的有: ...
- DOM拓展表格小练习
涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
随机推荐
- mysql子查询批量找id最大的
$sql = "select a.id as max_id,a.uid from(SELECT `uid`, idFROM (`users_level_change_log`)WHERE ` ...
- 卸载iptables 小心了！！怎么关闭和卸载iptables
千万千万不要使用下面的命令卸载iptables yum remove iptables 这样操作会卸载掉很多系统必要的组件,那就开不了机了,链接不上了.切记切记. 如果想永远停用,使用以下命令即可: ...
- UVA11735_Corner the Queens
题目是这样的,游戏规则,每个人轮流将二维空间上的皇后往下,往左或者往斜下45度的方向移动. 谁第一个移动到0,0的位置就获胜. 题目给定你若干个矩形,求矩形中任取一点且该点必胜的概率有概率. 其实是这 ...
- HDU——1573 X问题
又来一发水题. 解同余方程而已,用类似于剩余定理的方法就O了. 直接上代码:(注意要判断是否有解这种情况) #include <iostream> #include <cstdio& ...
- 关于slow http attack以及apche tomcat的应对方式
HTTP 的 Slow Attack 有着悠久历史的 HTTP DOS 攻击方式,最早大约追溯到 5 年前,按理说早该修复了,但是 Apache 的默认配置中仍然没有添加相关配置,或者他们认为这是 f ...
- BZOJ4719 NOIP2016天天爱跑步（线段树合并）
线段树合并的话这个noip最难题就是个裸题了. 注意merge最后return x,以及如果需要区间查询的话这里还需要up,无数次死于这里. #include<iostream> #inc ...
- TechDay公开课实录:PaddlePaddle车牌识别实战和心得
车牌识别作为一种常见的图像识别的应用场景,已经是一个非常成熟的业务了,在传统的车牌识别中,可以使用字符分割+字符识别的方式来进行车牌识别,而深度学习兴起后,出现了很多端到端的车牌识别模型,不用分割字符 ...
- Docker学习笔记二：Docker常用命令及提升拉取镜像的速度
一.Docker命令: 1.docker images //命令用来查看docker中所包含的镜像信息 2.docker ps -a //命令用来查看docker中所包含所有容器信息(运行状 ...
- Win10如何搭建FTP服务器以实现快速传输文件
原文链接地址:http://blog.csdn.net/bai_langtao/article/details/77751447 Win10如何搭建FTP服务器以实现快速传输文件?相信大家在工作或生活 ...
- BZOJ 4864: [BeiJing 2017 Wc]神秘物质 解题报告
4864: [BeiJing 2017 Wc]神秘物质 Description 21ZZ 年,冬. 小诚退休以后, 不知为何重新燃起了对物理学的兴趣. 他从研究所借了些实验仪器,整天研究各种微观粒子. ...