正文
js实现表格审核信息 js提交表单数据
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
JS实现表格数据各种搜索功能的方法
本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下：
复制代码
代码如下:!DOCTYPE
html
html
head
meta
charset="utf-8"
title/title
script
type="text/javascript"
window.onload=function(){
var
oTab=document.getElementById("tab");
var
oBt=document.getElementsByTagName("input");
oBt[1].onclick=function(){
for(var
i=0;ioTab.tBodies[0].rows.length;i++)
{
var
str1=oTab.tBodies[0].rows[i].cells[1].innerHTML.toUpperCase();
var
str2=oBt[0].value.toUpperCase();
//使用string.toUpperCase()(将字符串中的字符全部转换成大写)或string.toLowerCase()(将字符串中的字符全部转换成小写)
//所谓忽略大小写的搜索就是将用户输入的字符串全部转换大写或小写，然后把信息表中的字符串的全部转换成大写或小写，最后再去比较两者转换后的字符就行了
/*******************************JS实现表格忽略大小写搜索*********************************/
if(str1==str2){
oTab.tBodies[0].rows[i].style.background='red';
}
else{
oTab.tBodies[0].rows[i].style.background='';
}
/***********************************JS实现表格的模糊搜索*************************************/
//表格的模糊搜索的就是通过JS中的一个search()方法，使用格式，string1.search(string2);如果
//用户输入的字符串是其一个子串，就会返回该子串在主串的位置，不匹配则会返回-1，故操作如下
if(str1.search(str2)!=-1){oTab.tBodies[0].rows[i].style.background='red';}
else{oTab.tBodies[0].rows[i].style.background='';}
/***********************************JS实现表格的多关键字搜索********************************/
//表格的多关键字搜索，加入用户所输入的多个关键字之间用空格隔开，就用split方法把一个长字符串以空格为标准，分成一个字符串数组，
//然后以一个循环将切成的数组的子字符串与信息表中的字符串比较
var
arr=str2.split('
');
for(var
j=0;jarr.length;j++)
{
if(str1.search(arr[j])!=-1){oTab.tBodies[0].rows[i].style.background='red';}
}
}
}
}
/script
/head
body
姓名:input
type="text"
/
input
type="button"
value="搜索"/
table
border="1"
bordercolor="blue"
id="tab"
thead
tdh2ID/h2/td
tdh2Name/h2/td
tdh2Age/h2/td
/thead
tbody
tr
td1/td
tdBlue/td
td15/td
/tr
tr
td2/td
tdMikyou/td
td26/td
/tr
tr
td3/td
tdweak/td
td24/td
/tr
tr
td4/td
tdsky/td
td35/td
/tr
tr
td5/td
td李四/td
td18/td
/tr
/tbody
/table
/body
/html
希望本文所述对大家的javascript程序设计有所帮助。
相关问答
Q1: Jquery.validate.js实现前端表单验证
jquery.validate.js表单验证
官方网站：
API:
当前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2
script src="../js/jquery.js" type="text/javascript"/script
script src="../js/jquery.validate.js" type="text/javascript"/script
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
例子：自定义密码验证的规则
Q2: 我要做一个表格，字段是审核状态 ，想做一个单选框 下拉后二选一： 未审核 、已审核 求高手教
先在右边空闲位置输入“未审核”和“已审核”，
选中审核状态这列，数据，有效性，有效性条件为“序列”，来源为之前输入的“未审核”和“已审核”，确定。
如果是提交表格的话用select下拉框就OK了
Q3: 怎么用js做一个表格
1．在页面div中创建一个空白表，可以根据需要对其进行定制。
2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。
3.在 TB 标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。
4．获取表中的数据，以供下图参考。
5．一旦我们获得了表中的数据，我们就应该将其转换成json数据的形式。
Q4: 请教：用JavaScript实现简单表格操作
!doctype html
html lang="en"
head
meta charset="UTF-8"
meta name="Generator" content="EditPlus®"
meta name="Author" content=""
meta name="Keywords" content=""
meta name="Description" content=""
titleDocument/title
style type="text/css"
.container {
width: 99.6%;
height: 99%;
position: absolute;
top: 0.5%;
left: 0.2%;
overflow: auto;
border: 1px outset #d0efe5;
border-radius: 5px;
-moz-border-radius: 5px;
-wekit-border-radius: 5px;
background: #F5F5F5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.toolbar {
width: 99.6%;
height: 40px;
padding: 10px;
}
.button, .button:visited {
background-color: #2981e4;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.button:hover {
background-color: #2575cf;
color: #fff;
}
.button:active {
top: 1px;
}
.table {
width: 600px;
border: solid #add9c0;
border-width: 1px 0px 0px 1px;
}
.table th, td {
line-height: 30px;
border: solid #add9c0;
border-width: 0px 1px 1px 0px;
}
.table tr {
width: 100%;
margin: 0 auto;
border: none;
overflow: hidden;
color: #2981e4;
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
}
.center {
text-align: center;
}
.table input[type='text'] {
width: 120px;
color: #333;
padding: 4px 5px;
border: 1px solid #e0ecff;
border-radius: 2px;
-o-border-radius: 2px;
-moz-border-radius: 2px;
-wekit-border-radius: 2px;
box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);
-o-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);
-webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);
-moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);
behavior: url(/PIE.htc);
}
.table input[type='text']:focus, .table input[type='text']:hover {
border: 1px solid #3aa2d0;
outline: none;
}
.new {
background: #E0ECFF;
}
/style
/head
body
div class="container"
div class="toolbar"
a class="button" id="btnNew" 新 增 /a
a class="button" id="btnGet" 取 值 /a
/div
table class="table center" id="userTable"
tr
th用户账户/th
th角色名称/th
th有效期/th
th操作/th
/tr
/table
/div
script type="text/javascript"
//var newRow = "tr class='new'tdinput type='text' name='account'/tdtdinput type='text' name='role'/tdtdinput type='text' name='period'/td/tr";
var userTable = document.getElementById("userTable");
var rowNum = 0;
//新增
function add(data) {
//data
var account = data data.account || "";
var role = data data.role || "";
var period = data data.period || "";
//row number
rowNum = rowNum + 1;
//row
var tr = document.createElement("tr");
tr.class = "new";
//account
var td = document.createElement("td");
var child = document.createElement("input");
child.id = "account_" + rowNum;
child.type = "text";
child.name = "account";
child.value = account;
td.appendChild(child);
tr.appendChild(td);
//role
td = document.createElement("td");
child = document.createElement("input");
child.id = "role_" + rowNum;
child.type = "text";
child.name = "role";
child.value = role;
td.appendChild(child);
tr.appendChild(td);
//period
td = document.createElement("td");
child = document.createElement("input");
child.id = "period_" + rowNum;
child.type = "text";
child.name = "period";
child.value = period;
td.appendChild(child);
tr.appendChild(td);
//oper
td = document.createElement("td");
//del
child = document.createElement("input");
child.id = "btn_del_" + rowNum;
child.type = "button";
child.index = rowNum;
child.value = "删除";
child.onclick = del;
td.appendChild(child);
//update
child = document.createElement("input");
child.id = "btn_update_" + rowNum;
child.type = "button";
child.index = rowNum;
child.value = "修改";
child.onclick = update;
td.appendChild(child);
//detail
child = document.createElement("input");
child.id = "btn_detail_" + rowNum;
child.type = "button";
child.index = rowNum;
child.value = "明细";
child.onclick = detail;
td.appendChild(child);
tr.appendChild(td);
//addRow
userTable.appendChild(tr);
};
//修改
function update(e) {
var idx = e.target.index;
document.getElementById("account_" + idx).value = "Account_New";
document.getElementById("role_" + idx).value = "Role_New";
document.getElementById("period_" + idx).value = "Period_New";
};
//删除
function del(e) {
var tr = e.target.parentNode.parentNode;
userTable.removeChild(tr);
}
//加载数据
function load(datas) {
if (datas) {
for (var index in datas) {
add(datas[index]);
}
}
}
//行信息
function detail(e) {
var idx = e.target.index;
var item = {
account : document.getElementById("account_" + idx).value,
role : document.getElementById("role_" + idx).value,
period : document.getElementById("period_" + idx).value
};
alert(JSON.stringify(item));
}
//列表信息
function list() {
var datas = new Array();
for(var idx = 1; idx = rowNum; idx ++){
if(document.getElementById("account_" + idx)){
var item = {
account : document.getElementById("account_" + idx).value,
role : document.getElementById("role_" + idx).value,
period : document.getElementById("period_" + idx).value
};
datas.push(item);
}
}
alert(JSON.stringify(datas));
}
window.onload = function() {
var datas = [];
for (var idx = 0; idx 5; idx++) {
datas.push({
"account" : "用户" + (idx + 1),
"role" : "角色" + (idx % 2 == 0 ? "普通用户" : "VIP"),
"period" : "201" + idx + "-" + (12 - idx) + "-" + (28 - idx)
});
}
load(datas);
};
btnNew.onclick = function() {
add();
};
btnGet.onclick = function(){
list();
};
/script
code
此方法使用了DOM操作，另外一种方法是使用Table自带的方法处理，如：
表：table.tBodies,table.tHead,table.caption,table.tFoot,table.deleteRow,table.insertRow
行: tbody.rows,tbody.deleteRow,tbody.insertRow
单元格：tr.cells,tr.deleteCell,tr.insertCell
等方法实现同样的操作，不过现在网上有很多JS/JQuery插件都实现了类似的功能，你可以研究下源码；
/code
/body
/html
Q5: 如何在form中调用js表单验证
可以在submit按钮上添加onclick事件。通过创建function函数进行验证，全部通过后执行form.submit()，错误则利用alert或者innerHTML显示错误信息。
js实现表格审核信息的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js提交表单数据、js实现表格审核信息的信息别忘了在本站进行查找喔。
