JS-表格数据的添加与删除、搜索

最新推荐文章于 2019-10-18 11:55:00 发布

weixin_30568715

最新推荐文章于 2019-10-18 11:55:00 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qq309240790/p/5105799.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS练习-表格数据的添加与删除、搜索</title>
<style>

</style>
<script>
window.οnlοad=function()
{
var oTab=document.getElementById('table1')
var oName=document.getElementById('name')
var oAge=document.getElementById('age')
var oBtn=document.getElementById('btn')
var oSearch=document.getElementById('search')
var oSearchBtn=document.getElementById('searchBtn')
var id=oTab.tBodies[0].rows.length+1//定义序号变量

oBtn.οnclick=function()
{
  var oTr=document.createElement('tr')

  var oTd=document.createElement('td')
  oTd.innerHTML=id++
  oTr.appendChild(oTd)

  var oTd=document.createElement('td')
  oTd.innerHTML=oName.value
  oTr.appendChild(oTd)

  var oTd=document.createElement('td')
  oTd.innerHTML=oAge.value
  oTr.appendChild(oTd)

  var oTd=document.createElement('td')
  oTd.innerHTML='<a href="javascript:;">删除</a>'
  oTr.appendChild(oTd)//添加表格行

  oTd.getElementsByTagName('a')[0].οnclick=function()
  {
   oTab.tBodies[0].removeChild(this.parentNode.parentNode)

  }//删除表格行

  oTab.tBodies[0].appendChild(oTr)
  }

  oSearchBtn.οnclick=function()
  {

   for( var i=0; i<oTab.tBodies[0].rows.length; i++)
   {
    var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
             var sTxt=oSearch.value.toLowerCase()
    var attr=sTxt.split('')
    oTab.tBodies[0].rows[i].style.background=''
    for( var j=0; j<attr.length; j++)
    {
    if(sTab.search(attr[j])!=-1)
    {
     oTab.tBodies[0].rows[i].style.background='yellow'
    }

    }
   }
  }//模糊搜索，多关键字搜索
}

</script>
</head>

<table id="table1" border="1" width="800px">
<thead>
    <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
     </thead>
     <tbody>
     <tr>
            <td>1</td>
            <td>陈子君</td>
            <td>25</td>
            <td></td>

        </tr>
     <tr>
            <td>2</td>
            <td>Blue</td>
            <td>13</td>
            <td></td>
        </tr>
     <tr>
            <td>3</td>
            <td>张三</td>
            <td>45</td>
            <td></td>
        </tr>
     <tr>
            <td>4</td>
            <td>李四</td>
            <td>50</td>
            <td></td>
        </tr>
     <tr>
            <td>5</td>
            <td>S物流</td>
            <td>35</td>
            <td></td>
        </tr>
     <tr>
            <td>6</td>
            <td>我</td>
            <td>27</td>
            <td></td>
        </tr>
     <tr>
            <td>7</td>
            <td>surPrise</td>
            <td>30</td>
            <td></td>
        </tr>
   </tbody>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/qq309240790/p/5105799.html

weixin_30568715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-表格数据的添加与删除、搜索

<!doctype html><html><head><meta charset="utf-8"><title>JS练习-表格数据的添加与删除、搜索</title><style></style><script>window.onload=function(){var oTab=docu...
复制链接

扫一扫