jQuery创建表格

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>创建表格练习</title><style type="text/css">body{padding-left:15px;font-size:20px;}table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}input[type='button']{font-size:20px;}</style><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">/** 练习1：创建单行单列的表格 */function createTable1(){//创建表格var $table=$("<table></table>");var $tr=$("<tr></tr>");var $td=$("<td>Hello,我是td</td>");$tr.append($td);$table.append($tr);$("body").append($table);$("body").append("<hr/>");}/** 练习2：创建5行6列的表格 */function createTable2(){var $table=$("<table></table>");for(var r=0;r<5;r++){var $tr=$("<tr></tr>");for(var c=0;c<6;c++){var $td=$("<td>hello,我是td</td>");$tr.append($td);}$table.append($tr);}$("body").append($table);$("body").append("<hr/>");}/** 练习3：创建指定行和列的表格 */function createTable3(){var rows=$("#rows").val();var cols=$("#cols").val();var $table=$("<table></table>");for(var r=0;r<rows;r++){var $tr=$("<tr></tr>");for(var c=0;c<cols;c++){var $td=$("<td>hello,我是td</td>");$tr.append($td);}$table.append($tr);}$("body").append($table);$("body").append("<hr/>");}</script>
</head>
<body><!-- 练习1：点击下列按钮创建单行单列表格 --><input type="button" name="" id="" value="创建单行单列表格" onclick="createTable1();"/><br><!-- 练习2：点击下列按钮创建5行6列表格 --><input type="button" name="" id="" value="创建5行6列表格" onclick="createTable2();"/><br><!-- 练习3：点击下列按钮创建指定行、指定列的表格 --><input type="button" name="" id="" value="创建表格输入行数列数" onclick="createTable3();"/><br>行数:<input type="text" name="" id="rows" value="" /><br/>列数:<input type="text" name="" id="cols" value="" /><br/><!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
</body>
</html>

jQuery创建表格相关推荐

如何使用jQuery创建表格Zebra Stripes效果
这是一个简单的示例,展示了如何使用jQuery创建表格Zebra Stripes效果. <html> <head> <title>jQuery Zebra Stri ...
html中jquery创建表格,jQuery创建表格
创建表格 table{ border:#0099FF 1px solid; width:600px; border-collapse:collapse; } table td{ border:#009 ...
html 动态创建表格,jquery动态创建表格
html代码 js代码 var myObj = [{ "testname": "张三1111", "sex": "男", ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
手机端html表格,jQuery Mobile 表格
jQuery Mobile 表格响应式表格响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...
前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏目录视图摘要视图订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
office技巧：Word如何快速的创建表格
Word如何创建表格创建表格的方法有很多种,我们可以通过Word提供的插入表格功能创建表格,也可以手动绘制表格,甚至还可以将输入好的文字转换为表格,灵活掌握这些方法,便可创建自己需要的表格. 一, ...
jquery计算表格列，求和
jquery计算表格列,求和有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码效果展示: 核心代码: $(function() {var totalRow = 0 ...
C# 如何在PDF文档中创建表格
表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理.那在PDF类型的文档中如何来添加表格并且对表格进行格式化操作呢?使用常规方法直接在PDF中添加表格行不通,那我们可以在借助第三方组 ...

jQuery创建表格

jQuery创建表格相关推荐

最新文章

热门文章