前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >表格案例

表格案例

作者头像
河湾欢儿
发布2018-09-06 16:47:01
1.3K0
发布2018-09-06 16:47:01
举报
文章被收录于专栏:河湾欢儿的专栏

添加名字和年龄

代码语言:javascript
复制
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);
        };

    };

删除一行

代码语言:javascript
复制
    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);
        };

    };

搜索

代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.01.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档