求解一道js面试题的答案（给点提示也很感谢！）

wangzhichao666 2011-07-26 11:01:52
http://www.wfnyg.com/mianshiti.html 这是面试题地址。我要问的是第一个问题：

下面是我用jquery写的代码，有两个问题没解决：
1、新添加的链接没有在$(".list a").toggle()中被历遍。
猜测原因：$(".list a").toggle()中$(".list a")因为是文档载入后就历遍的，所以当$(".ft a").click执行完之后，新添加的<a>没有被历遍到$(".list a"),造成新添加的链接没有执行toggle()。
提问：在javascript中，如何通过一个点击事件重新历遍一个数组，并把历遍结果传递到全局。

2、点击“保存”按钮后，修改结果未保存。求解决方案，或者您能告诉我我应当去学习js的什么知识才能完成此功能的编写。
3、最后对面试要求说说代码“优点”和“不足”不是很理解，询问一下这是在考察自己的什么知识，应该如何回答。


我把html代码做了改动：
<div id="datalist">
<div class="hd">现在一共有：<strong class="item_count"></strong> 个条目</div>
<div class="list">
<ul>
<li><span>这是第一条</span><a href="javascript:;">修改</a></li>
<li><span>这是第二条</span><a href="javascript:;">修改</a></li>
<li><span>花儿为什么这样红？</span><a href="javascript:;">修改</a></li>
<li><span>你知道小月月是哪个不？</span><a href="javascript:;">修改</a></li>
<li><span>人生就是一个杯具</span><a href="javascript:;">修改</a></li>
</div>
<div class="ft"><a href="javascript:;">新增条目</a></div>
</div>
我的jquery代码如下：
$(document).ready(function(){
//读取显示列表的个数
listNumber = $(".list li").length;
$(".item_count").text(listNumber);
//添加列表条数&更新列表个数
$(".ft a").click(function(){
var context = '<li><span>未命名</span><a href="javascript:;">修改</a></li>';
$(".list ul").append(context);
var newNumber = $(".list li").length;
$(".item_count").text(newNumber);
});
//激活修改按钮.(没实现出来，是否能给点提示？)
$(".list a").toggle(
function(){
var contextElement = $(this).siblings().eq(0);
var contextContent = contextElement.text();
$(this).text("保存");
contextElement.hide();
contextElement.after("<input type='text'>");
var inputElement = $(this).siblings().eq(1);
inputElement.attr("value",function(){return contextContent;});
},
function(){
$(this).text("修改");
var inputElement = $(this).siblings().eq(1);
inputElement.detach();
var contextElement = $(this).siblings().eq(0);
contextElement.show().append(function(){
inputElement.attr("value");
})
});

});
...全文
434 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
yibey 2011-07-28
  • 打赏
  • 举报
 回复
个人觉得7楼就是一个嘴上君子，不用行动的人
yibey 2011-07-28
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 jparser 的回复:]
引用 6 楼 yibey 的回复:
我看下第二个问题

foo.prototype.bar = function(){
setTimeout(this.sayHello.call(this), 1000);
}

改成这样就行了

真TM 扯蛋
[/Quote]



<script language="javascript" type="text/javascript">

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上运行下看看结果
燥动的心 2011-07-26
  • 打赏
  • 举报
 回复
增加新的行，用clone，这样事件也会clone
s1120624175 2011-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 s1120624175 的回复:]

首先 这个画面不应该是写死的
根据查出来的数据 通过js循环生成TR
count 就是现在一共有：5 个条目
点击保存通过aJax去完成 静态保存的效果

缺点 每行后面都有个保存的链接 这个既不好看 又过于频繁
可以改成这样的方式 双击当前行 当前行出现编辑模式 失去焦点 即保存
另外新增条目为何只增不减
[/Quote]


....失去焦点 即保存 → 单击除了当前行以外任意的地方 即保存 不是失焦
s1120624175 2011-07-26
  • 打赏
  • 举报
 回复
首先 这个画面不应该是写死的
根据查出来的数据 通过js循环生成TR
count 就是现在一共有：5 个条目
点击保存通过aJax去完成 静态保存的效果

缺点 每行后面都有个保存的链接 这个既不好看 又过于频繁
可以改成这样的方式 双击当前行 当前行出现编辑模式 失去焦点 即保存
另外新增条目为何只增不减
挨踢直男 2011-07-26
  • 打赏
  • 举报
 回复 
<div class="p">

<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}
下一个就是你 2011-07-26
  • 打赏
  • 举报
 回复
关于第三个题目
abc排列的时候
都float：left
cba的时候 c float：left a： float：right b 设置两边的padding-left：180px； padding-right：180px；
bac的时候 b float：left ； ac float：right
别忘记了清除浮动
下一个就是你 2011-07-26
  • 打赏
  • 举报
 回复
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
JParser 2011-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 yibey 的回复:]
我看下第二个问题

foo.prototype.bar = function(){
setTimeout(this.sayHello.call(this), 1000);
}

改成这样就行了
[/Quote]
真TM 扯蛋
yibey 2011-07-26
  • 打赏
  • 举报
 回复
我看下第二个问题

foo.prototype.bar = function(){
setTimeout(this.sayHello.call(this), 1000);
}

改成这样就行了
wangzhichao666 2011-07-26
  • 打赏
  • 举报
 回复
感谢pj100，对我帮助很大
燥动的心 2011-07-26
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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有没有帮助。
C++面试题
1.构造一个类MySingleton,使该类只能存在一个实例. 思路:     将构造函数写为private的，然后通过一个成员静态函数来调用构造函数即可:) 例: #include "iostream.h" class MySingleton { private: static MySingleton* _instance; MySingleton(){ cout ~MyS
九月十月百度，迅雷，华为，阿里巴巴，最新校招笔试面试六十题
本博客自2010年10月11日开通以来，已经帮助了一大批人找到工作，特别是连续三年在每一年的9、10月份陪伴了至少三届毕业生找工作的旅程，包括校招中的笔试面试，今年也不会例外，我会在本博客开通3周年之际一如既往的陪伴大家一起成长。     本文所整理的全部笔试面试题要么来源于我群内群友们的分享，要么摘自论坛或博客，所有原题均来自网络。虽然本文中整理的绝大部分笔试面试题偏算法（自己特意为之之故
Java面试题全集（上）
[置顶] Java面试题全集（上） 标签： Java面试题面试题大全最新面试题 2015-04-08 17:14 640930人阅读 评论(242) 收藏 举报  分类： 面试笔试（19）  程序语言（82）  版权声明：本文为博主原创文章，未经博主允许不得转载。 2013年年底的时候，我看到了网上流传的一个叫做《Java面试题大全》
校招笔试、面试六十题
转 原文： 九月十月百度，迅雷，华为，阿里巴巴最新校招笔试面试六十题（11.05） 链接：http://blog.csdn.net/v_july_v/article/details/11921021 分类： 09.MS 100' follow-up 2013-09-23 10:1353539人阅读 评论(136)收藏 举报 ...
九月十月百度，迅雷，华为，阿里巴巴笔试面试六十题(第411~470题)
九月迅雷，华为，阿里巴巴，最新笔试面试三十题题记    本博客自2010年10月11日开通以来，已经帮助了一大批的人找到工作，特别是连续三年在每一年的9、10月份陪伴了至少三届毕业生找工作的旅程，包括校招中的笔试面试，今年也不会例外，希望本博客在3周年之际一如既往的陪伴大家一起成长。    本文所整理的全部笔试面试题要么来源于我群内群友们的分享，要么摘自论坛或博客，所有原题均来自网络，如果大家对以
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章