基于javascript实现表格的简单操作
这篇文章主要为大家详细介绍了基于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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
javascript课程设计
潍坊科技学院 JavaScript课程设计 报告书 设计题目基于javascript的电子商务网站开发 专业班级11软件一 学生姓名江京翔 学号201101080002 指导教师陈凤萍 日期2012.12.24~2012.1.11 成绩
课程设计任务书 院系：软件学院专业：软件技术班级：11软1 学号：201101080002 一、课程设计时间 2012年12月24日至2013年1月11日，共计3周。 二、课程设计内容 使用html+javascript+css 完成以下任务： 1、能够熟练使用css结合html实现网页布局。 2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。 3、熟练使用javascrip中的对象，实现网页的动态效果。 三、课程设计要求 1. 课程设计质量： ?贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。 ?网页设计布局合理，色彩搭配合理，网页操作方便。 ?设计过程中充分考虑浏览器兼容等问题，并做适当处理。 ?代码应适当缩进，并给出必要的注释，以增强程序的可读性。 2. 课程设计说明书： 课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。 四、指导教师和学生签字 指导教师：学生签名：江京翔 五、教师评语：
基于javascript的电子商务网站开发 摘要 JavaScript是开发WEB应用程序不可或缺的一种语言，无论是为web页面增加交互性还是创建整个应用程序，如果没有Javascript，今天的web就不是现在这个样子了。JavaScript是具有正式规范的基于标准语言；然而，正如任何一个web开发人员所告诉你的那样，几乎每个web浏览器对这个规范的解释都不同。 本网站充分的结合了HTML与CSS的结合充分显示了网站的动态效果，是客户与网站能够充分的结合，进行信息的交换信息不断的进行更新。 基于新闻管理网站，国外新闻页面更具有代表性，是网站最标准型之一，通过Javascript 脚本的交互式该页面更好与其他的页面相互结合。 同时通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。 关键字：节假日、日历、Javascript脚本
js表单验证代码全集
js表单验证代码全集 2008年06月25日星期三下午 03:23 1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 5:只能输入英文字符和数字 6: js email验证、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码 2.1: js 不为空、为空或不是对象、判断为空、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 2.8:form文本域的通用校验函数 2.9：js验证手机号,含158,159段的 1. 长度限制
2. 只能是汉字 3." 只能是英文