一个能给添加行的表格

<!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之表格操作的更多相关文章

  1. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  2. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  3. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  4. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  5. 采用DOM进行表格的修改操作

    2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...

  6. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  7. DOM表格操作

    注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择 表格操作用到的属性: 1.tHead 2.tBodies 3.tFoot 更为细致的有: ...

  8. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  9. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

  1. 第一次c++团队合作作业期间第一篇随笔

    分析了自己分到的任务,我的理解是这样的:首先要生成程序主框架,在主框架中进行地图的描绘.我应该是先进行地图的拼接,把建筑物和地面都拼接好.然后再在地图上显示出英雄和小兵.同时还要在主框架中分析了自己分 ...

  2. 领悟JavaScript面向对象

    JavaScript 是面向对象的.但是不少人对这一点理解得并不全面. 在 JavaScript 中,对象分为两种.一种可以称为“普通对象”,就是我们所普遍理解的那些:数字.日期.用户自定义的对象(如 ...

  3. 七周七语言之用Io编写领域特定语言

    如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/06/05/sevenlang-io/. Io 语言 ...

  4. week1读构建之法-读书笔记

    最开始听见杨老师说邹欣老师这个名字总觉得很熟悉,后来看见博客上老师的头像恍然大悟,原来机缘巧合已经在微博上关注邹老师许久,一直觉得邹老师是个很有意思的人,兴趣一定十分广泛,看了老师的书确实能感觉到邹老 ...

  5. Ansible基础配置与常用模块使用

    环境介绍: Ansible服务端IP:192.168.2.215 Ansible客户端IP:192.168.2.216.192.168.2.218.192.168.2.113   一.创建Ansibl ...

  6. centOS7设置静态ip后无法上网的解决，【亲可测】

    最近在VMware虚拟机里玩Centos,装好后发现上不了网.经过一番艰辛的折腾,终于找到出解决问题的方法了.最终的效果是无论是ping内网IP还是ping外网ip,都能正常ping通.方法四步走: ...

  7. [计算机网络-数据链路层] CSMA、CSMA/CA、CSMA/CD详解

    1.CSMA(载波侦听多路访问协议) CSMA 当其他节点检测到信道被占用时不发送数据.但是当数据发送完后其他节点同时检测到信道为空闲,之后又在同一时刻发送数据,可能再次产生冲突. 2.CSMA/CD ...

  8. hdu-题目1421：搬寝室

    http://acm.hdu.edu.cn/showproblem.php?pid=1421 搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  9. ping不通的常见原因和解决办法

    Ping是Windows.Unix和Linux系统下的一个命令.ping也属于一个通信协议,是TCP/IP协议的一部分.利用“ping”命令可以检查网络是否连通.如果ping不通则可以通过以下方式寻找 ...

  10. 【C++】深度探索C++对象模型读书笔记--构造函数语义学（The Semantics of constructors）（四）

    成员们的初始化队伍(member Initia 有四种情况必须使用member initialization list: 1. 当初始化一个reference member时: 2. 当初始化一个co ...