第一题：请使用Javascript实现以下动态效果
可以使用任何你喜欢的方式和库，尽量使用你认为优雅的实现，并在代码完成说简要说明此方案的优点和不足。
这是我用原生js实现的，用到了input标签的readonly属性，实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一题</title>
<style>
body{width: 900px;margin: 0 auto;line-height: 30px;}
a{
text-decoration: none;
}
.head{background-color: #059ED3;}
.row{
height: 30px;
border-bottom: 1px solid #888;
}
input{
margin-left: 10px;
margin-top: 6px;
border: none;
outline: none;
float: left;
}
.title{
border: 1px solid #999;
}
a{float: right;}
###add{
background-color: #CCCCCC;
width: 100%;
height: 30px;
}
###add a{
display: block;
text-align: right;
font-size: 14px;
font-weight: bolder;
color: #008000;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="head">现在共有:<strong>4</strong> 个条目</div>
<div id="list">
<div class="row"><input type="text" value="标题" /><a href="javascript:;" class="change">修改</a></div>
<div class="row"><input type="text" value="标题" /><a href="javascript:;" class="change">修改</a></div>
<div class="row"><input type="text" value="标题" /><a href="javascript:;" class="change">修改</a></div>
<div class="row"><input type="text" value="标题" /><a href="javascript:;" class="change">修改</a></div>
</div>
<div id="add"><a href="javascript:;">新增条目</a></div>
<script>
window.onload = function(){
change();
add();
};
change = function(){
var list = document.getElementById('list');
var titles = list.getElementsByTagName('input');
var changes = list.getElementsByTagName('a');
for (var i = titles.length - 1; i >= 0; i--) {
titles[i].readOnly = "readonly";
};
for (var j = changes.length - 1; j >= 0; j--) {
changes[j].index = j;
changes[j].onclick = function(){
if (this.text == "修改") {
this.text = "保存";
titles[this.index].readOnly = "";
titles[this.index].className = "title";
}else{
this.text = "修改";
titles[this.index].readOnly = "readonly";
titles[this.index].className = "";
};
}
};
};
add = function(){
var addBtn = document.getElementById('add').getElementsByTagName("a")[0];
addBtn.onclick = function(){
var newRow = document.createElement("div");
newRow.className = "row";
newRow.innerHTML = '<input type="text" value="未命名" /><a href="javascript:;" class="change">修改</a>';
var list = document.getElementById("list");
// console.log("click",list);
// e = e || window.event;
list.appendChild(newRow);
change();
// e.cancelBubble = true;
update();
}
}
update = function(){
var list = document.getElementById('list');
var lth = list.getElementsByTagName('div').length;
var count = document.getElementsByTagName('strong')[0];
count.innerHTML = lth;
}
</script>
</body>
</html>
第二题：请说明要输出正确的myName的值要如何修改程序?并解释原因
foo = function() {
this.myName = "Foo function.";
}
foo.prototype.sayHello = function() {
alert(this.myName);
}
foo.prototype.bar = function() {
setTimeout(this.sayHello, 1000);
}
var f = new foo;
f.bar();
因为this指向的是当前调用这个方法的对象,代码中setTimeout是一个全局函数,全写是window.setTimeout，所以setTimeout(func,time)中的func参数中的this应该指向window。可以用如下的修改方法：
foo.prototype.bar = function(){
var That = this;
setTimeout(function(){
That.sayHello();
},1000);
}
第三题：请按下列要求写出相应的 Html 和 CSS
现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>第三题</title>
<style>
.content{
width:auto;
margin: 0 auto;
position: relative;
height: 50px;
overflow: auto;
}
.a{
background-color: red;
width: 160px;
}
.b{
background-color: blue;
width: 600px;
}
.c{
background-color: yellow;
width: 160px;
}
.a,.b,.c{
height: 50px;
}
/* ABC*/
.a1,.b1,.c1{
float: left;
}
/* CBA*/
.c2{
position: absolute;
top: 0;
left: 0;
}
.a2{
float: right;
}
.b2{
margin-left: 160px;
width: auto;
}
/* BAC*/
.b3{
float: left;
}
.a3{
position: absolute;
top: 0;
left:600px;
}
.c3{
float: right;
}
</style>
</head>
<body>
<p>从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%）.</p>
<p>ABC，结构</p>
<div class="content">
<div class="a a1">A</div>
<div class="b b1">B</div>
<div class="c c1">C</div>
</div>
<p>CBA,B宽度自适应</p>
<div class="content">
<div class="a a2">A</div>
<div class="b b2">B</div>
<div class="c c2">C</div>
</div>
<p>BAC结构</p>
<div class="content">
<div class="a a3">A</div>
<div class="b b3">B</div>
<div class="c c3">C</div>
</div>
</body>
</html>
总结
第一题中，因为用到了readonly属性，实现起来比较简单。但是根据原题目的演示，猜测到他的实现方法是动态的添加input标签，同时控制input的display属性来实现，感觉太麻烦就没有用那种方法。
第二题中，关于js中this的指向问题，我的理解还是不够深刻，需要继续深入了解。
第三题，很轻松的就解决了。
