求jquery js大神解决操作表格问题,万分感谢
感谢您来帮助我看此问题，对于js，jquery之类不是很精通，遇到此问题实在无法解决。1点击修改让表格内容变成可操作的文本框，删除是删除这一行的数据2点击新增一条数据就增...
感谢您来帮助我看此问题，对于js，jquery之类不是很精通，遇到此问题实在无法解决。
1点击修改让表格内容变成可操作的文本框，删除是删除这一行的数据
2点击新增一条数据就增加一行，增加的这一行是可以操作的文本框
3点击保存以上数据，把所有可操作的文本框，变成普通文本
求jquery js大神解决操作表格问题,万分感谢，感谢替我看过此问题的所有人。qq邮箱2210912676@qq.com
qq2210912676，有现成的例子可以发到我的邮箱或qq，如果你有时间，希望可以帮我做个例子，再次感谢。 展开
1点击修改让表格内容变成可操作的文本框，删除是删除这一行的数据
2点击新增一条数据就增加一行，增加的这一行是可以操作的文本框
3点击保存以上数据，把所有可操作的文本框，变成普通文本
求jquery js大神解决操作表格问题,万分感谢，感谢替我看过此问题的所有人。qq邮箱2210912676@qq.com
qq2210912676，有现成的例子可以发到我的邮箱或qq，如果你有时间，希望可以帮我做个例子，再次感谢。 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></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_table>tbody").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>
代码，测试不严谨，自己修修改改了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先在table td内给每个td 定义一个id;在弄个隐藏域文本框用于放内容id="content" 随便固定
2. 写一个jquery 方法
function riteEdit(id){ //这个可以放到td里面使用 直接就可以双击表格变为文本框
var s=$("#"+id);//获取好指定的td
var value=$(s).text();//获取好td表格里面指定行的原始内容
$(s).append("<input type='text' value='' id='f'/>");//里面的value值【id=f】+id 你自己拼接字符我略过手打累
$("#f"+id).val(value);//找到你追加的文本框并把内容复到里面
}
function updateContent(id){//这个方法我就不多说了【鼠标离开td保存】把table内容变调恢复原样并且内容改变后的样子
var s=$("#f"+id).val();//获取文本框内容 //当鼠标离开时获取
$("#content").val($("#f"+id).val());//把内容放入隐藏文本框中以后修改用
var obj=$("#"+id);//获取td对象
$(obj).text("");//清空td某一行里面的所有东西
$("obj").text($("#content").val());//把文本框改动完毕的数据放到table里面并恢复td状态
}
至于你那个修改按钮 是用于存数据库用的，如果不用于存数据库 就把事件写到按钮上也一样
剩下的就不用多说了！手都打疼了！不给分过得去吗郁闷死了！
更多追问追答
追问
虽然很详细，但是依照您所说的，我还是整不出来。
追答
思路都一样！ 呵呵 没关系的！ 你应该是新手吧 加油奥一起学习
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你这个复杂了，不是一句两句说得清的
更多追问追答
追问
能给个例子吗
追答
闲着没事帮你写了个例子，自己看吧
这是html
<body>
<table style="width:30%;" cellpadding="1" border="1" >
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>操作</th>
</tr>
</thead>
<tbody id="mainbody">
</tbody>
</table>
<input id="Button5" type="button" value="新增一行" />
</body>
这是相应的js代码，记得引入jquery哦！有点多贴不上来了，只有给你张截图了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
