foo = function () { this.myName = "Foo function."; }; foo.prototype.sayHello = function () { alert(this.myName); }; foo.prototype.bar = function () { var o = this; setTimeout(function () { o.sayHello.call(o); }, 1000); } var f = new foo; f.bar(); 第二个问题改成这样 用settimeout的时候的对象this指的是window
关于第三个题目 abc排列的时候 都float：left cba的时候 c float：left a： float：right b 设置两边的padding-left：180px； padding-right：180px； bac的时候 b float：left ； ac float：right 别忘记了清除浮动
根据查出来的数据 通过js循环生成TR
count 就是现在一共有：5 个条目
点击保存通过aJax去完成 静态保存的效果缺点 每行后面都有个保存的链接 这个既不好看 又过于频繁
可以改成这样的方式 双击当前行 当前行出现编辑模式 失去焦点 即保存
另外新增条目为何只增不减
<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>
<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;
$(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) { 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); });
$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) {
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>这个好像有点类似，不知道对LZ有没有帮助。
setTimeout(this.sayHello.call(this), 1000);
} 改成这样就行了
foo.prototype.sayHello = function () { alert(this.myName); };
foo.prototype.bar = function () { var o = this; setTimeout(function () { o.sayHello.call(o); }, 1000); }
var f = new foo;
f.bar();
第二个问题改成这样
用settimeout的时候的对象this指的是window
abc排列的时候
都float：left
cba的时候 c float：left a： float：right b 设置两边的padding-left：180px； padding-right：180px；
bac的时候 b float：left ； ac float：right
别忘记了清除浮动
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>第一种.p{ width:960px; color:#fff}
.p .a{width:180px; background:#f00; float:left}
.p .b{ width:600px; background:#000; float:left}
.p .c{ width:180px; background:blue; float:left}
第二种
.p{ width:600px; color:#fff; position:relative; margin-left:180px;}
.p .a{width:180px; background:#f00; position:absolute; top:0; right:-180px;}
.p .b{ background:#000; width:100%;}
.p .c{ width:180px; background:blue; position:absolute; top:0; left:-180px;}第三种
.p{ width:960px; color:#fff; position:relative}
.p .a{width:180px; background:#f00; position:absolute; top:0; left:600px;}
.p .b{ width:600px; background:#000; float:left}
.p .c{ width:180px; background:blue; float:right}
foo = function(){
this.myName = "Foo function.";
}
foo.prototype.sayHello = function(){
alert(this.myName);
}
foo.prototype.bar = function(){
setTimeout(this.sayHello.call(this), 1000);
}
var f = new foo;
f.bar();
</script>自己在IE上和FF上运行下看看结果