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
随机推荐
- STL学习笔记(一) 容器
0.前言随机访问迭代器: vector.string.dequeSTL的一个革命性的方面就是它的计算复杂性保证 条款01:慎重选择容器类型 c++提供的容器:标准STL序列容器:vector.stri ...
- 【2017YYHS WC】
因为本葳蕤分数太低去不了WC,只能同去WC的各位大爷一起训练一波,就称作是YYHS WC吧,其实就是WC难度的多校 day1:早上8:30考的试,下午1:00去吃中饭 T1:考场打得暴力结果矩阵乘法后 ...
- msp430项目编程46
msp430综合项目---监控系统46 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- set_include_path() &&get_include_path()用法
function initialize(){ set_include_path(get_include_path().PATH_SEPARATOR . "core/"); ...
- POSTMAN编写文档
第一步:创建文件夹: 同时创建全局变量: 第二步:创建分组文件夹: 第三步:添加请求: 类似正常调试,然后多了一步保存: 保存: 请求方式发生相应变化,同时颜色也发生变化,说明保存成功: ====== ...
- HDU 5905 Black White Tree(树型DP)
题目链接 Black White Tree 树型DP,设$f[i][j]$为以$i$为根的子树中大小为$j$的连通块中可以包含的最小黑点数目. $g[i][j]$为以$i$为根的子树中大小为$j$的 ...
- java学习笔记总略
二.正文(一)Java1.接口和抽象类的区别①抽象类里可以有构造方法,而接口内不能有构造方法.②抽象类中可以有普通成员变量,而接口中不能有普通成员变量.③抽象类中可以包含非抽象的普通方法,而接口中所有 ...
- 使用Maven运行Java main的方法(转)
使用Maven运行Java Main的方法(既Java Application项目),可以有如下方式解决: 1.将Maven项目导入到eclipse中,然后直接项目右键[Run As]->[Ja ...
- vSphere 6.5支持512e,NVMe SSD呢?
原创 2017-01-12 朱朋博 金笑雨 企事录 2016年底,VMware终于宣布,从vSphere 6.5开始支持512e扇区格式了. 这当然是好事.不过,不黑不舒服斯基说:原来以前的版本连51 ...
- Webstorm上面通过babel将es6转化为es5
1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { &quo ...