求jquery js大神解决操作表格问题,万分感谢
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title/title
script src=""/script
style type="text/css"
.tb_table
{
border-collapse: collapse;
border: none;
width: 100%;
}
.tb_table thead tr th
{
border: 1px solid #ccc;
height: 30px;
}
.tb_table tbody tr td
{
border: 1px solid #ccc;
height: 25px;
width: 220px;
}
/style
script type="text/javascript"
function Update(num) {
$("label").each(function () {
if ($(this).attr("data-name") == "lbl_" + num) {
$(this).hide();
}
});
$("#id_" + num).removeAttr("hidden");
$("#name_" + num).removeAttr("hidden");
$("#age_" + num).removeAttr("hidden");
$("#btn_" + num).show();
}
function Save(num) {
$("label").each(function () {
if ($(this).attr("data-name") == "lbl_" + num) {
$(this).show();
}
});
$("#id_" + num).attr("hidden", "hidden");
$("#" + $("#id_" + num).attr("data-lbl")).text($("#id_" + num).val());
$("#name_" + num).attr("hidden", "hidden");
$("#" + $("#name_" + num).attr("data-lbl")).text($("#name_" + num).val());
$("#age_" + num).attr("hidden", "hidden");
$("#" + $("#age_" + num).attr("data-lbl")).text($("#age_" + num).val());
$("#btn_" + num).hide();
}
function Delete(num) {
$("#tr_" + num).remove();
}
function AddLine() {
var num = parseInt($("#hdfnum").val());
num++;
$("#hdfnum").val(num);
var html = 'tr id="tr_' + num + '"';
html += 'td';
html += 'label data-name="lbl_' + num + '" id="lblid' + num + '" style="display:none;"';
html += '/label';
html += 'input type="text" id="id_' + num + '" data-lbl="lblid' + num + '" name="id_' + num + '"/';
html += '/td';
html += 'td';
html += 'label data-name="lbl_' + num + '" id="lblname' + num + '" style="display:none;"';
html += '/label';
html += 'input type="text" data-lbl="lblname' + num + '" id="name_' + num + '" name="name_' + num + '"/';
html += '/td';
html += 'td';
html += 'label data-name="lbl_' + num + '" id="lblage' + num + '" style="display:none;"';
html += '/label';
html += 'input type="text" data-lbl="lblage' + num + '" id="age_' + num + '" name="age_' + num + '" /';
html += '/td';
html += 'td';
html += 'input type="button" value="修改" onclick="Update(' + num + ')" /';
html += 'input type="button" value="保存" id="btn_' + num + '" onclick="Save(' + num + ')" /';
html += 'input type="button" value="删除" id="btn_' + num + '" onclick="Delete(' + num + ')" /';
html += '/td';
html += '/tr';
$(".tb_tabletbody").append(html);
}
/script
/head
body
input id="hdfnum" name="hdfnum" type="hidden" value="2" /
table class="tb_table"
thead
tr
th
编号
/th
th
姓名
/th
th
年龄
/th
th
操作
/th
/tr
/thead
tbody
tr id="tr_1"
td
label data-name="lbl_1" id="lblid1"
1/label
input type="text" value="1" id="id_1" data-lbl="lblid1" name="id_1" hidden="hidden" /
/td
td
label data-name="lbl_1" id="lblname1"
张数/label
input type="text" value="张数" data-lbl="lblname1" id="name_1" name="name_1" hidden="hidden" /
/td
td
label data-name="lbl_1" id="lblage1"
21/label
input type="text" value="21" data-lbl="lblage1" id="age_1" name="age_1" hidden="hidden" /
/td
td
input type="button" value="修改" onclick="Update(1)" /
input type="button" value="保存" id="btn_1" onclick="Save(1)" /
/td
/tr
/tbody
/table
input type="button" value="添加" onclick="AddLine();" /
/body
/html
代码，测试不严谨，自己修修改改了
jQuery操作table表格
一、数据准备
二、操作
//1.鼠标移动行变色
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
//2.奇偶行不同颜色
$("#table3 tbody tr:odd").css("background-color", "#bbf");
$("#table3 tbody tr:even").css("background-color","#ffc");
$("#table3 tbody tr:odd").addClass("odd")
$("#table3 tbody tr:even").addClass("even")
//3.隐藏一行
$("#table3 tbody tr:eq(3)").hide();
//4.隐藏一列
$("#table5 tr td::nth-child(3)").hide();
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
//5.删除一行
// 删除除第一行外的所有行
$("#table6 tr:not(:first)").remove();
//6.删除一列
// 删除除第一列外的所有列
$("#table6 tr td:not(:nth-child(1))").remove();
//7.得到（设置）某个单元格的值
//设置table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html("value");
//获取table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html();
//8.插入一行：
//在第二个tr后插入一行
$("插入3插入插入插入").insertAfter($("#table7 tr:eq(1)"));
//删除指定行（第二行） $("#table3 tr:gt(0):eq(1)").remove();
(2)删除列，比如删除表格中的第二列：
//eq:获取子元素索引从 0 开始，先删除表头$("#table3 tr th:eq(1)").remove();//nth-child:获取子元素从 1 开始$("#table3 tr td:nth-child(2)").remove();
(3)删除其它行，比如第二行之外的所有行：
$("#table3 tr:gt(0):not(:eq(1))").remove();
(4)删除其它列，比如第二列之外的所有列：
//先删除表头$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();
(5)隐藏行，比如隐藏第二行：
$("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//显示//$("#table3 tr:gt(0):eq(1)").css("display", "");
(6)隐藏列，比如隐藏第二列：
$("#table3 tr th:eq(1)").hide();
$("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
jquery 获取 table 总行数：
$("table tr").size();
var hang = $("#g").find("tr").length;
jquery 获取 table 总列数：
$("table td").size();
var lie = $("#g").find("tr").find("td").length-1;
jquery 双击可编辑表格怎么做呢。
这个比较容易，有2种方案：
1、双击事件后，隐藏表格td之间的内容，插入一个input / ，然后就可以编辑了。
2、双击事件后，讲当前表格td的contentEditable属性修改为true，当前 td 就可以编辑了。
如果你不理解 第2种方案，你可以测试这个代码:
div contentEditable="true"可编辑的，你可以在这里写字/div
------------------------------------------
谢谢，要设为最佳哦，^_*
如何用jquery改变表格单元格的内容
var td=$("#你这个单元格的id");//当然了，这只是id选择器去获取标签对象，还有其他很多选择器！
$(td).html("你要改变的内容");