以前都说jQuery的兼容性是绝对可靠的,复制代码
想用jquery将title前面的tr移除了,就用了语句: $("#title~tr").remove() ;结果在火狐下能够移除,在IE下不能够移除,小编晕了,后来换了种写法,改成:$("#title").siblings("tr").remove();,那样试一下,果然能够了,哈哈,看来jQuery尽管好用,不过用的不当,依旧会出标题啊!
前日用jQuery操作table时,出现了叁个包容性的难题,此前都说jQuery的包容性是纯属可靠的,明日察觉了这些bug,哈哈!
1.鼠标移动行变色
: 复制代码 代码如下: table id ="cartable" tr id ="title" td***/td td***9159.com,/td td***/td td***/td td***/td td***/td td***/td /tr /table 想用jquery将title后面...
5.删减一行
复制代码 代码如下:
PS:table的另外数据也是用jQuery填充步向的。
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
<table id ="cartable" >
<tr id ="title">
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
</tr>
</table>
<table id ="cartable" >
<tr id ="title">
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
</tr>
</table>
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
function checkAll(evt){
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i ){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",chall.checked);
}
}
//方法二:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i ){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
$("#table1
tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
$("#table1
tr").find("input[type='checkbox']").attr("checked",evt.checked);
}
PS:table的别样数据也是用jQuery填充步入的。
粗粗是这般的:
以下列出10个jQuery操作table常用到的功能:
大意是那样的:
想用jquery将title前面包车型地铁tr移除了,就用了语句: $("#title~tr").remove() ;结果在火狐下能够移除,在IE下不可能移除,作者晕了,后来换了种写法,改成:$("#title").siblings("tr").remove();,那样试一下,果然能够了,哈哈,看来jQuery尽管好用,不过用的不当,依旧会出难点呀!
function btnAddRow(){
//行号是从0开头,最终一行是增创、删除、保存开关行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_" rownum "'
name='chk_" rownum "'/>";
var text="<input type='text' id='txt_" rownum "'
name='txt_" rownum "' width='75px'/>";
var sel="<select id='sel_" rownum "'><option
value='1'>男</option><option
value='0'>女</option></select>";
var
row="<tr><td>" chk "</td><td>" text "</td><td>" sel "</td><td>" text "</td><td>" text "</td></tr>";
$(row).insertAfter($("#table1 tr:eq(" rownum ")"));
}
4.潜藏一列
11.顾客端动态增加行
$('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, function(){
$(this).children('td').removeClass('hover')
});
复制代码 代码如下:
var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');
//方法零:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); //
给当下一块绑定的子采用增添效果
});
function btnSaveClick(){
//find()方法中本身权且不清楚哪些设定四个筛选标准,所以上面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" ||
"select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0){
alert($(this).find("input[type='text']").val());
}else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}
10.全选或全不选
$('#table1 tr td::nth-child(3)').hide();
复制代码 代码如下:
// 删除除第一列外的有着列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();
$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
复制代码 代码如下:
13.顾客端保存
复制代码 代码如下:
// 删除除第一行外的具备行
$('#table1 tr:not(:first)').remove();
// 删除钦点行
$('#table1 tr:eq(3)').remove();
// 在第贰个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7
tr:eq(1)'));
复制代码 代码如下:
8.插入一行
方法二:
复制代码 代码如下:
9.收获每一行钦赐的单元格的值
3.潜伏一行
12.客户端删除一行
// 设置table1,第三个tr的首先个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// 获取table1,第三个tr的首先个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();
7.获得(设置)有些单元格的值
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
2.奇偶行不一样颜色
历次只好删除一行,删除多行时出错
function btnDeleteRow(){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked")){
if(i!=0){//不可能去除行标题
$("#table1 tr:eq(" i ")").remove();
}
}
});
}
其一比上边的温馨,可以须臾间刨除多少个记录
function btnDeleteRow(){
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall"){//无法去除标题行
if(chk.attr("checked")){
$(this).remove();
}
}
});
}
复制代码 代码如下:
复制代码 代码如下:
6.删减一列
复制代码 代码如下:
您恐怕感兴趣的稿子:
- jQuery 选取表格(table)里的行和列及改变轻巧样式
- jQuery完结冻结表格行和列
- jQuery实现表格行和列的动态增加与删除方法【测量检验可用】
- 依靠JQuery的动态删除Table表格的行和列的代码
- jquery如何判别表格同一列差别行input数据是还是不是再度
- jquery通过select列表采取框对表格数据举行过滤示例
- jQuery表格插件datatables用法总结
- jQuery达成鼠标可拖动调度表格列宽度
- JQuery 表格操作(交替展现、拖动表格行、选择行等)
- jQuery CSS实现的table表格行列转置效能示例
复制代码 代码如下:
本文由9159.com发布于前端,转载请注明出处:以前都说jQuery的兼容性是绝对可靠的,复制代码
关键词: 9159.com
下一篇:没有了