基于javascript实现表格的简单操作

本文实例为大家分享了js表格操作的简单方法，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>zzzz</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        width: 1000px;
        margin: 100px auto;
        font-family: "微软雅黑";
        font-size: 18px;
        background-color: #fff;
      }
      #table tr{
        text-align: center;
      }
      tbody tr:nth-child(2n+1){
        background-color: #ccc;
      }
      tbody tr:hover{
        background-color: green;
      }
      input[type=text]{
        height: 25px;
        width: 136px;
        background-color: turquoise;
        margin-bottom: 10px;
      }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        var otb=document.getElementById("table");
        var otr=otb.tBodies[0].rows;
        var oadd=document.getElementById("add");
        var oname=document.getElementById('name');
        var osex=document.getElementById('sex');
        var id=otr.length+1;
        oadd.onclick=function(){
          var atr=document.createElement('tr');
          var atd1=document.createElement('td');
          var atd2=document.createElement('td');
          var atd3=document.createElement("td");
          var atd4=document.createElement("td");
          atd4.innerHTML='<a>删除</a>';
          atd1.innerHTML=id++;
          atd2.innerHTML=oname.value;
          atd3.innerHTML=osex.value;

          atr.appendChild(atd1);
          atr.appendChild(atd2);
          atr.appendChild(atd3);
          atr.appendChild(atd4)
          otb.tBodies[0].appendChild(atr);

        atd4.getElementsByTagName('a')[0].onclick=function(){
            otb.tBodies[0].removeChild(this.parentNode.parentNode)
        }

      }

      var obtn=document.getElementById("btn");
      var otxt=document.getElementById("ss");
      obtn.onclick=function(){
        for(var i=0;i<otb.tBodies[0].rows.length;i++){
          var osta=otb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
          var ot=otxt.value.toLowerCase();
          var oar=ot.split(' ');
          otb.tBodies[0].rows[i].style.background='';
          for(var j=0;j<oar.length;j++){
          if(osta.search(oar[j])!=-1){
            otb.tBodies[0].rows[i].style.background='red';
          }
        }

        }
      }
    }
    </script>
  </head>
  <body>
    <input type="text" placeholder="请输入搜索内容" id="ss"/>
    <input type="button" value="查询" id="btn"/><br />
    姓名：<input type="text" id="name" />
    性别：<input type="text" id="sex" />
    <input type="button" value="添加" id="add"/>
    <table border="1" width="400px" id="table">
      <thead>
        <tr>
          <td>序号</td>
          <td>人名</td>
          <td>性别</td>
          <td>修改</td>
        </tr>
        <tbody>
          <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>删除</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>男</td>
          <td>删除</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Caesar</td>
          <td>女</td>
          <td>删除</td>
        </tr>
        <tr>
          <td>4</td>
          <td>刘言</td>
          <td>女</td>
          <td>删除</td>
        </tr>
        </tbody>
      </thead>
    </table>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JavaScript DOM操作表格及样式

    一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

  • javascript操作表格

    Power Table body{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } input { FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default; } table{ font-size: 9pt; word-break:break-all; cursor: default; BORDE

  • JavaScript表格常用操作方法汇总

    本文实例汇总了JavaScript表格常用操作方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <

  • JScript实现表格的简单操作

    本文实例为大家分享了JScript实现表格的简单操作,供大家参考,具体内容如下 实现思路: 1.添加时:获取当前列表的行数,在当前一行添加下一行: 2.用insertCell()方法添加一行,下标从0开始, 3.若要给新一行添加类型.响应事件,就用setAttribute()方法,类似于键值对,并用appendChild()方法将数据保存到新一行 4.删除时:获取需要删除行的当前行数this,然后获取父节点,把整一行删掉remove(),而不是单单删除某一行的单个数据 5.修改时:获取当前修改行

  • javascript操作表格排序实例分析

    本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit

  • JavaScript动态操作表格实例(添加,删除行,列及单元格)

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI

  • javascript实现表格增删改操作实例详解

    本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • Javascript 表格操作实现代码

    中国北京 中国上海 var tabobj = document.getElementById("ch"); //获取 Table 对象 for( var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript实现对表格元素进行排序操作

    javascript实现对表格元素进行排序操作

    我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

  • javascript 表格内容排序 简单操作示例代码

    复制代码 代码如下: <div id="html"></div> <script> var listInfos = new Array(); listInfos[0] = new Array(); listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'D

随机推荐