表格js代码(javascript表格代码)

html

head

style

*{margin:0;padding:0;font-size:12px;}

table{border-collapse:collapse;}

td{

border-right:1pxsolid#C1DAD7;

border-bottom:1pxsolid#C1DAD7;

background:#fff;

font-size:11px;

padding:6px6px6px12px;

color:#4f6b72;

}

/style

/head

body

8行6列的表格

script

document.write("tablestyle='border:1pxsolidblack'")

for(vari=0;i8;i++){

document.write("tr")

for(varj=0;j6;j++){

document.write("td"+(i*4+j)+"/td");

}

document.write("/tr")

}

document.write("/table");

/script

/body

/html

本文实例讲述了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程序设计有所帮助。

table?width="200"?border="0"?id="table"

??tr

????td名称/td

????td图片/td

????td价格/td

????td操作/td

??/tr

??tr

????td?/td

????td?/td

????td10/td

????td?/td

??/tr

??tr

????td?/td

????td?/td

????td10/td

????td?/td

??/tr

??tr

????td?/td

????td?/td

????td10/td

????td?/td

??/tr

??tr

????td?/td

????td?/td

????td10/td

????td?/td

??/tr

??tr

????td?/td

????td合计/td

????td?/td

????td?/td

??/tr

/table

script?type="text/javascript"

????var?calcTotal=function(table,column){//合计，表格对象，对哪一列进行合计，第一列从0开始

????????var?trs=table.getElementsByTagName('tr');

????????var?start=1,//忽略第一行的表头

????????????end=trs.length-1;//忽略最后合计的一行

????????var?total=0;

????????for(var?i=start;iend;i++){

????????????var?td=trs[i].getElementsByTagName('td')[column];

????????????var?t=parseFloat(td.innerHTML);

????????????if(t)total+=t;

????????}

????????trs.getElementsByTagName('td')[column].innerHTML=total;

????};

????calcTotal(document.getElementById('table'),2);

/script