html中如何使用js动态添加表格

JavaScript023

html中如何使用js动态添加表格,第1张

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中,则写在<script>标签内部,如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id,此位置必须是<tbody>内部(不是特别准确,但根据我的测试就得到此结论,有其他的方法请留言,谢谢),如下

复制代码 代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用,但我在写的时候,没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中,要先创建行和单元格,再在<.tbody>中添加行,如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中

1,动态添加验证规则

// 添加

$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}})

// 移除

$("#addConnectUser").rules('remove','required')

在此我要讲一下为什么有一个isString验证规则;这个是为了限制表单中input的输入规则;比如:不允许特殊字符,或者一些特殊的要求;这个isString是自己配置的

jQuery.validator.addMethod("isString", function(value, element) {

return this.optional(element) || (inputTest.test(value))

},"请输入规范内容")

// 此处的inputTest为你自定义的验证规则

2,如何给已经添加了表单验证的选项移除验证规则

$("#addConnectUser").rules("remove",'required')

//再次添加可以直接用

$("#addConnectUser").rules("add",'required')

单选。

单选按钮实现男女性别选择,不让男女同是都能都能选择,实现方法:在按钮的属性里写一个name属性,并且把name的值设置成相同的。