JQuery操作TABLE,及console.info问题。
还用alert 吗?看看console.info吧,代码的测试平台:ie9, firefox12
1. [代码][JavaScript]代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
width: 300px;
}
table td {
border: 1px solid black;
width: 50%;
}
table th {
border: 1px solid black;
width: 50%;
}
tbody th {
background-color: #06C;
}
</style>
</head>
<body>
<div>
<p id='para'>
<a id="delTbody" href="javascript:;">del tbody</a>
<a id='delRow' href="javascript:;">del row</a>
<a id='tbodyEmpty' href="javascript:;">tbody empty</a>
</p>
</div>
<table id='tab'>
<thead>
<tr>
<th>name</th>
<th>sex</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="../../jslib/jquery-1.7.1.js"></script>
<script type="text/javascript">
(function(w){
// ie8 or ie9 console problem solution.
if(! w.console){
//alert(".....");
w.console = {
info : function(){},
error : function(){},
log : function(){}
};
}
})(window);
var tab = $('#tab');
var jsonArr = [{'name' : 'zhai', 'sex' : 'F'},
{'name' : 'lsie', 'sex' : 'M'},
{'name' : 'abcd', 'sex' : 'M'},
{'name' : 'jia1', 'sex' : 'F'}
];
(function(){
console.info('OK');
var body = $("<tbody></tbody>");
for(var i = 0; i < jsonArr.length; i++){
var j = jsonArr[i];
var td1 = $('<td>' + j.name + '</td>');
var td2 = $('<td>' + j.sex + '</td>');
http://www.huiyi8.com/banbao/huabian/
var tr = $('<tr></tr>');
tr.append(td1);
tr.append(td2);
body.append(tr);
}
console.info(body.toString());
tab.append(body);
})();
$(document).ready(function () {
$('#para').click(function(event){
//console.info("para ......" + event);
var id = event.target.id;
switch(id){
case 'delTbody' :
console.info('del t');
$("#tab tbody").remove();
break;
case 'delRow' :
console.info('del r');
try{板报设计
tab[0].tBodies[0].deleteRow(0);
//tab[0].deleteRow(1);
}catch(e){
console.error('rows length is zero.' + e);
}
break;
case 'tbodyEmpty' :
$('#tab tbody').empty();
break;
}
});
/*
$('#delRow').click(function(){
console.info('del r');
$('table tbody').empty();
});
*/
});
</script>
</body>
</html>
JQuery操作TABLE,及console.info问题。的更多相关文章
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- JQuery操作Table元素
使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- Jquery操作Table
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- jQuery操作Table学习总结[转]
<style type="text/css"> .hover { } </style>< ...
- 如何用jquery操作table的方法
今天我在做你约我吧交友www.niyuewo.com网项目时遇到一个问题,就是如何用qjuery控制table的添加.编辑与删除,经过网上查资料发现用jquery很容易实现,在此整理下来供大家参考: ...
- jQuery操作table tr td
1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("h ...
- jquery 操作table样式拖动参考
参考: http://blog.csdn.net/kdiller/article/details/6059727 http://www.jb51.net/article/59795.htm
随机推荐
- *Codeforces963C. Cutting Rectangle
$n \leq 200000$种互不相同的矩形,给长宽和数量,都$\leq 1e12$,问有多少种大矩形只沿平行长和宽切正好切成这些矩形. 首先可以发现在一个合法情况下,有些矩形的位置是可以乱挪的,比 ...
- 品酒大会 BZOJ 4199
品酒大会 [问题描述] [输入格式] [输出格式] [样例输入] 10ponoiiipoi 2 1 4 7 4 8 3 6 4 7 [样例输出] 45 56 10 56 3 32 0 0 0 0 0 ...
- HDU 5001 Walk (暴力、概率dp)
Walk Time Limit: 30000/15000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Sub ...
- web开发规范文档
Web前端开发规范文档 规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(windos下tab键占四个空格,linux下TAB键占八个空格). CSS样式属性或者JAVASCR ...
- mysql workbench 导出建表语句
导出建表语句和数据 server—–>data export—–>选中表 注意,export to dump project folder,这种方式是每个表对应一个sql文件. 导出建 ...
- BZOJ 4034 [HAOI2015]树上操作(树链剖分)
题目链接 BZOJ4034 这道题树链剖分其实就可以了. 单点更新没问题. 相当于更新 [f[x], f[x]]这个区间. f[x]表示树链剖分之后每个点的新的标号. 区间更新的话类似DFS序,求出 ...
- vue之列表渲染
一.v-for循环用于数组 v-for 指令根据一组数组的选项列表进行渲染. 1.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组名, item 是数组元 ...
- Mybatis详解
SqlSession(SqlSessionDaoSupport类) SqlSessionDaoSupportSqlSessionDaoSupport是一个抽象的支持类,用来为你提供SqlSession ...
- Ubuntu 16.04安装Jetty Web服务器
一.下载 http://www.eclipse.org/jetty/download.html 二.安装 tar -zxvf jetty-distribution-9.4.7.v20170914.ta ...
- python把日期转换为秒数;日期转为字符串;datetime、date
1.秒数是相对于1970.1.1号的秒数 2.日期的模块有time.datetime 3. import datetime t = datetime.datetime(2009, 10, 21, 0, ...