点编辑的时候编辑学号,然后编辑变、删除变成保存、取消
都可实现
自己逻辑有问题
不知道怎么做
求大家帮忙<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</HEAD><BODY>
<br><br>
<h4>User</h4>
</hr>
<form action="www.163.com" method="post" id="form" onsubmit="at()">
<table border="1" width="600">
<tbody>
<tr>
<th>学号</th>
<th>操作</th>
</tr>
<tr>
<td>000001</td>
<th><a href="#" onclick="edit();" id="edit">aaaaaaa</a>|删除</th>
</tr>
<tr>
<td>000002</td>
<th><a href="#" onclick="edit();" id="edit">编辑</a>|删除</th>
</tr>
</tbody>
</table>
</form></BODY><script type="text/javascript">
$(function(){
var numTd = $("#edit");
numTd.click(function() {
var tdObj = $(this);
var text = tdObj.html();
tdObj.html("");
var inputObj = $("<input type='text'>").val(text).appendTo(tdObj);
inputObj.trigger("focus").trigger("select");
inputObj.click(function() {
return false;
});
});
});
</script>
</HTML>
都可实现
自己逻辑有问题
不知道怎么做
求大家帮忙<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</HEAD><BODY>
<br><br>
<h4>User</h4>
</hr>
<form action="www.163.com" method="post" id="form" onsubmit="at()">
<table border="1" width="600">
<tbody>
<tr>
<th>学号</th>
<th>操作</th>
</tr>
<tr>
<td>000001</td>
<th><a href="#" onclick="edit();" id="edit">aaaaaaa</a>|删除</th>
</tr>
<tr>
<td>000002</td>
<th><a href="#" onclick="edit();" id="edit">编辑</a>|删除</th>
</tr>
</tbody>
</table>
</form></BODY><script type="text/javascript">
$(function(){
var numTd = $("#edit");
numTd.click(function() {
var tdObj = $(this);
var text = tdObj.html();
tdObj.html("");
var inputObj = $("<input type='text'>").val(text).appendTo(tdObj);
inputObj.trigger("focus").trigger("select");
inputObj.click(function() {
return false;
});
});
});
</script>
</HTML>
<table border="1" width="600">
<tbody>
<tr>
<th>学号</th>
<th>操作</th>
</tr>
<tr>
<td>000001<input type="text" value="000001" style="display:none"/></td>
<th><a href="#" onclick="edit();" id="edit">aaaaaaa</a>|删除</th>
</tr>
<tr>
<td>000002<input type="text" value="000002" style="display:none"/></td>
<th><a href="#" onclick="edit();" id="edit">编辑</a>|删除</th>
</tr>
</tbody>
</table>
<script>
</script>之后的就是控制显示/隐藏/取值的问题了
这种方法不合适啊,太过简单,而却我的数据量很大的,不可能每个都要写一个
我想通过Javascript去处理
<html>
<head>
<title>New Document </title>
<style type="text/css">
.hideEle
{
display: none;
}
</style> <script type="text/javascript" src="jquery/jquery.js"></script></head>
<body>
<br>
<br>
<h4>
User</h4>
<form action="www.163.com" method="post" id="form" onsubmit="at()">
<table border="1" width="600" id='tb'>
<tbody>
<tr>
<th width='300'>
学号
</th>
<th>
操作
</th>
</tr>
<tr>
<td>
000001
</td>
<th>
<div>
<a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
<div class="hideEle">
<a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
</th>
</tr>
<tr>
<td>
000002
</td>
<th>
<div>
<a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
<div class="hideEle">
<a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
</th>
</tr>
</tbody>
</table>
</form>
</body><script type="text/javascript"> function trim(str) { //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
} $(function() {
$("#tb tr:gt(0)").each(function() {
var firstTd = $(this).children(":eq(0)");
var text = trim(firstTd.html());
firstTd.html($("<span class='oldContent'></span>").text(text));
$("<input type='text' class='update hideEle' />").val(text).appendTo(firstTd);
});
$("a.edit").click(function(e) { return edit(e); });
$("a.remove").click(function(e) { return remove(e); });
$("a.save").click(function(e) { return save(e); });
$("a.cancel").click(function(e) { return cancel(e); });
}); function edit(btn) {
btn = btn.srcElement || btn.target;
$(btn).parent().hide(); //编辑,删除所在的层隐藏
$(btn).parent().next().show(); //保存,取消所在的层显示
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
var text = firstTd.html();
var text = firstTd.find(".oldContent").hide().html();
firstTd.find(".update").show().val(text);
return false;
} function remove(btn) {
btn = btn.srcElement || btn.target;
$(btn).parents("tr").remove();
return false;
} function save(btn) {
btn = btn.srcElement || btn.target;
$(btn).parent().hide();
$(btn).parent().prev().show();
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
var text = firstTd.find(".update").hide().val();
firstTd.find(".oldContent").show().html(text);
return false;
} function cancel(btn) {
btn = btn.srcElement || btn.target;
$(btn).parent().hide();
$(btn).parent().prev().show();
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
firstTd.find(".oldContent").show();
firstTd.find(".update").hide();
return false;
}</script></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>可编辑的表格 </title>
<style type="text/css">
.hideEle
{
display: none;
}
</style> <script type="text/javascript" src="jquery/jquery.js"></script></head>
<body>
<br>
<br>
<h4>
User</h4>
<form action="www.163.com" method="post" id="form" onsubmit="at()">
<table border="1" width="600" id='tb'>
<tbody>
<tr>
<th width='300'>
学号
</th>
<th>
操作
</th>
</tr>
<tr>
<td>
000001
</td>
<th>
<div>
<a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
<div class="hideEle">
<a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
</th>
</tr>
<tr>
<td>
000002
</td>
<th>
<div>
<a href="#" class="edit">编辑</a>|<a href="#" class="remove">删除</a></div>
<div class="hideEle">
<a href="#" class='save'>保存</a>|<a href="#" class="cancel">取消</a></div>
</th>
</tr>
</tbody>
<tfoot>
<tr style="text-align: right;">
<th colspan="2">
<a href="#" id='add'>增加</a>
</th>
</tr>
</tfoot>
</table>
</form>
</body><script type="text/javascript"> function trim(str) { //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
var $backTr;
var currentSaveBtn;
var currentCancelBtn;
$(function() {
$("#tb tbody tr:gt(0)").each(function() {
var firstTd = $(this).children(":eq(0)");
var text = trim(firstTd.html());
firstTd.html($("<span class='oldContent'></span>").text(text));
$("<input type='text' class='update hideEle' />").val(text).appendTo(firstTd);
});
$("a.edit").click(function(e) { var btn = e.srcElement || e.target; return edit(btn); });
$("a.remove").click(function(e) { var btn = e.srcElement || e.target; return remove(btn); });
$("a.save").click(function(e) { var btn = e.srcElement || e.target; return save(btn); });
$("a.cancel").click(function(e) { var btn = e.srcElement || e.target; return cancel(btn); });
$backTr = $("#tb tbody tr:eq(1)").clone(true);
$backTr.find(".oldContent").html("未命名");
$("#add").click(function() {
return add();
});
}); function add() {
$backTr.clone(true).appendTo("#tb tbody");
} function edit(btn) {
confirmOperat();
$(btn).parent().hide(); //编辑,删除所在的层隐藏
$(btn).parent().next().show(); //保存,取消所在的层显示
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
var text = firstTd.html();
var text = firstTd.find(".oldContent").hide().html();
firstTd.find(".update").show().val(text);
currentCancelBtn = secTd.find("a.cancel");
currentSaveBtn = secTd.find("a.save");
return false;
} function remove(btn) {
confirmOperat();
currentCancelBtn = null;
currentSaveBtn = null;
$(btn).parents("tr").remove();
return false;
} function save(btn) {
currentCancelBtn = null;
currentSaveBtn = null;
$(btn).parent().hide();
$(btn).parent().prev().show();
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
var text = firstTd.find(".update").hide().val();
firstTd.find(".oldContent").show().html(text);
return false;
} function cancel(btn) {
currentCancelBtn = null;
currentSaveBtn = null;
$(btn).parent().hide();
$(btn).parent().prev().show();
var secTd = $(btn).closest("th");
var firstTd = secTd.prev(); //取得 第一格
firstTd.find(".oldContent").show();
firstTd.find(".update").hide();
return false;
} function confirmOperat() {
if (currentCancelBtn) {
if (confirm("是否保存当前修改?")) {
save(currentSaveBtn);
} else {
cancel(currentCancelBtn);
}
}
}</script></html>
大概试了一下,不知道对不对。
找个jquery的api,对着看一下吧,都 是上面的方法