这篇文章主要为大家详细介绍了基于 javascript 实现表格的简单操作,具有一定的参考价值,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: http://www.phperz.com/article/17/0301/265566.html