表格案例

添加名字和年龄

window.onload= function () {
        var btn=document.getElementById('btn');
        var username=document.getElementById('username');
        var age=document.getElementById('age');
        var otab=document.getElementById('otab');
        btn.onclick= function () {
            var otr=document.createElement('tr');

            var otd1=document.createElement('td');
            otd1.innerHTML=otab.tBodies[0].rows.length+1;
            otr.appendChild(otd1);

            var otd2=document.createElement('td');
            otd2.innerHTML=username.value;
            otr.appendChild(otd2);

            var otd3=document.createElement('td');
            otd3.innerHTML=age.value;
            otr.appendChild(otd3);

            otab.tBodies[0].appendChild(otr);
        };

    };

删除一行

    window.onload= function () {
        var btn=document.getElementById('btn');
        var username=document.getElementById('username');
        var age=document.getElementById('age');
        var otab=document.getElementById('otab');
        var oid=otab.tBodies[0].rows.length;
        btn.onclick= function () {
            var otr=document.createElement('tr');
            var otd1=document.createElement('td');
            otd1.innerHTML=++oid;
            otr.appendChild(otd1);

            var otd2=document.createElement('td');
            otd2.innerHTML=username.value;
            otr.appendChild(otd2);

            var otd3=document.createElement('td');
            otd3.innerHTML=age.value;
            otr.appendChild(otd3);

            var otd4=document.createElement('td');
            var oa=document.createElement('a');
            oa.innerHTML='删除';
            oa.href="javascript:;";
            otd4.appendChild(oa);
            otr.appendChild(otd4);
            oa.onclick= function () {
                otab.tBodies[0].removeChild(this.parentNode.parentNode);
            };

            otab.tBodies[0].appendChild(otr);
        };

    };

搜索

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload= function () {
        var text1=document.getElementById('username');
        var btn=document.getElementById('btn');
        var otab=document.getElementById('otab');
        btn.onclick= function () {
            for(var i=0;i<otab.tBodies[0].rows.length;i++){
                var arr=text1.value.split('');
                otab.tBodies[0].rows[i].style.background='';

                for(var j=0;j<arr.length;j++){
                    if(otab.tBodies[0].rows[i].cells[1].innerHTML.search(arr[j])!=-1){
                        otab.tBodies[0].rows[i].style.background='yellow';
                    }
                }
            }
        };
    };
</script>
</head>
<body>
<form action="###">
    姓名:<input type="text" id="username"/>
    <input type="button" value="搜索" id="btn"/>
</form>
<br/>
<br/>

<table border="1px" cellpadding="0" cellspacing="0" id="otab">
<thead>
  <th>id</th>
  <th>姓名</th>
  <th>年龄</th>
</thead>
<tbody>
  <tr>
      <td>1</td>
      <td>欢欢</td>
      <td>18</td>
  </tr>
  <tr>
      <td>2</td>
      <td>倩倩</td>
      <td>15</td>
  </tr>
  <tr>
      <td>3</td>
      <td>朵朵</td>
      <td>16</td>
  </tr>
  <tr>
      <td>4</td>
      <td>刘显良</td>
      <td>16</td>
  </tr>
</tbody>
</table>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

js、jQuery 获取文档、窗口、元素的各种值

浏览器当前窗口文档body的宽度: document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度: do...

31220
来自专栏一“技”之长

Bootstrap响应式前端框架笔记二——排版标签与类

    Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰...

9920
来自专栏进击的君君的前端之路

CSS实现全屏切换效果

37520
来自专栏用户2442861的专栏

CSS基础-引入方法,选择器,继承

    例子:<div style="background-color:red">行内式</div>

9910
来自专栏Java后端技术

HTML标记语法之表格元素

8.直列化格式:<colgroup><colgroup>(<col>与<colgroup>的功能完全一样)

29910
来自专栏deepcc

一个特别不错的jQuery快捷键插件:js-hotkeys

53460
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

56670
来自专栏Android干货

自定义控件详解(一):Paint类与Canvas类

20440
来自专栏木子昭的博客

css布局-实现左中右布局的5种方式

? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

38480
来自专栏HTML5学堂

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂:在前一篇文章当中,我们讲解了SVG的基本知识,并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲...

408170

扫码关注云+社区

领取腾讯云代金券