首页>>前端>>JavaScript->表格js代码(javascript表格代码)

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

时间:2023-12-06 本站 点击:0

编写Javascript 代码输出一个八行六列的表格

html

head

style

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

table{border-collapse:collapse;}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

/style

/head

body

8行6列的表格

script

document.write("table style='border:1px solid black'")

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

document.write("tr ")

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

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

}

document.write("/tr")

}

document.write("/table");

/script

/body

/html

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程序设计有所帮助。

求一段JS 表格 列求和 代码

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

如何用js删除表格一行或者多行

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写基础代码。

2、在index.html中的script标签,输入js代码:$('table tr').eq(1).remove();$('table tr').eq(1).remove();。

3、浏览器运行index.html页面,此时发现表格的最后2行都被js删除了。

怎么用js做一个表格

1.在页面div中创建一个空白表,可以根据需要对其进行定制。

2.创建表之后,我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。

3.在 TB 标签中,我们添加了标签,主要用于提供用户输入参数,而全局变量num主要用于区分每个添加参数的唯一id。

4.获取表中的数据,以供下图参考。

5.一旦我们获得了表中的数据,我们就应该将其转换成json数据的形式。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/14967.html