史上最强大的PHP Web面试题(会做就能进百度)

我突然发现今天是一个特殊的日子.已经上了google的当了,不想再落百度的坑.

我做了个，很丑陋。而且只在firefox下正常执行，IE下不好使。查看效果：
http://life161.web-48.com/t.php代码：<?PHP
header("content-type:text/html;charset=utf-8");$cats = array(
    array(
        'id' => 1,
        'name' => '学术和教育',
        'children' => array(
            array(
                'id' => 9,
                'name' => '自然科学',
                'children' => null,
            ),
            array(
                'id' => 8,
                'name' => '社会科学',
                'children' => null,
            ),
            array(
                'id' => 23,
                'name' => '哲学',
                'children' => null,
            ),
            // ...
        ),
    ),
    array(
        'id' => 3,
        'name' => '科技与发明',
        'children' => array(
            array(
                'id' => 4,
                'name' => '航天科技',
                'children' => null,
            ),
            array(
                 'id' => 5,
                 'name' => '火箭技术',
                 'chileren' => null,
            ),
            array(
                'id' => 6,
                'name' => '卫星技术',
                'children' => null,
            ),
            // ...
        ),
    ),
    // ...
);echo "<script type=\"text/javascript\">var myarr=".json_encode($cats).";</script>\n";
//echo json_encode($cats) ;
?>
<style type="text/css">
ul { list-style-type: none; margin:0px; width:100px}
ul li a{ display:block;  background:#ccc; }
ul li a:hover{ background:#999; }
</style>
<script type="text/javascript">
var out='' ;function showout(arr){
  for(var i=0;i<arr.length;i++){
    if(arr[i]['children']!=null){
      out += "</ul><li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li><ul class='list'>";
      showout(arr[i]['children']);
    }else{
      out += "<li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li>";
    }
  }
  return out ;
}
var outstr = "<ul class='list'>"+showout(myarr)+"</ul>";
document.write(outstr);
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ul.js"></script>
ul.js：$(document).ready( function() {
$("li + ul").hide();

$("li").click( function(){
//alert($(this).text());
$(this).find("+ul.list").toggle();
});
});
自己看着很郁闷，请高手指点。

这种效果用PHP做是不是有点远水解近渴了，这个效果就是前端的EXT或JQUERY-UI里的节点数tree吧，为什么一定要用PHP来达到这个效果，JAVASCRIPT完成不是更好吗？而且配置也灵活，数据.JSON数据组织形式如：
[{
"id":1,
"code":"01",
"name":"name1",
"addr":"address1",
"col4":"col4 data",
"iconCls":"icon-ok",
"children":[{
"id":2,
"code":"0101",
"name":"name11",
"addr":"address11",
"checked":true
},{
"id":3,
"code":"0102",
"name":"name12",
"addr":"address12",
"state":"closed"
}]
},{
"code":"02",
"name":"Languages abc",
"addr":"address2",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"0201",
"name":"Java",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"02013",
"name":"jdk1"
},{
"code":"02014",
"name":"jdk2"
}]
},{
"code":"0202",
"name":"C#",
"col4":"col4 data"
}]
}]
这个结构我觉得整体应用上应该比PHP来得更实际些！

个人看法：我不明白楼主为什么把这种应用称为史上最强大的PHP应用，还有用JS我觉得不管是性能上还是易用上都强过PHP，毕竟处理部分是交给客户端来展示分析效果的，而后台仅仅只是提供一些数据，以JSON形式返回给前端部分，没有必要让PHP去处理那么多的事务，其实我觉得这个要求和TREE树几乎是一样的，区别只是数据组织上的平台不同而已。换汤不换用，原理早就在生产实践中应用了，楼主说用JS的会应用百度引擎，那我就实在不理解了！难道纯PHP能实现节点树吗？

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php</title><script type="text/javascript"> var treeData = [{
id: 1,
name: "学术和教育",
children: [
{
id: 2,
name: "自然科学",
children: null
},
{
id: 3,
name: "社会科学",
children: [
{
id: 4,
name: "建筑学",
children: null
}
]
},
{
id: 4,
name: "哲学",
children: [
{
id: 4,
name: "建筑学",
children: null
}
]
}
]
},
{
id: 5,
name: "科技与发明",
children: null
}]; (function() {
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function createElement(tagName, styles, props) {
var tag = document.createElement(tagName);
if (styles) {
for (var styleName in styles) { if (isIE && styleName == "cssFloat") {
styleName = "styleFloat";
}

tag.style[styleName] = styles[styleName];
}
} if (props) {
for (var prop in props) {
tag[prop] = props[prop];
}
} return tag;
} function addNode(currentObj, parentNode) { var dlTag = createElement("dl");
var ddTag = createElement("dd", {
cursor: "pointer"
}, {
id: currentObj.id
});
var textNode = document.createTextNode(currentObj.name);
var childTag = createElement("div");
var children = currentObj.children;
if (children) {
for (var index = 0; index < children.length; index++) {
addNode(children[index], childTag);
}
} ddTag.onclick = function(e) {
var event = e || window.event; if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}

var childrenDiv = this.getElementsByTagName("div")[0]; if (childrenDiv.style.display == "none") {
childrenDiv.style.display = "block";
} else {
childrenDiv.style.display = "none";
}
};

ddTag.appendChild(textNode);
ddTag.appendChild(childTag);
dlTag.appendChild(ddTag);
parentNode.appendChild(dlTag);
} function initDisplay(container) {
var childrenDivs = container.getElementsByTagName("div"); for (var index = 0; index < childrenDivs.length; index++) {
childrenDivs[index].style.display = "none";
}
} JTree = function(containerId, datas) {
var container = document.getElementById(containerId); for (var index = 0; index < datas.length; index++) {
addNode(datas[index], container);
}

initDisplay(container);
};
})();
window.onload = function() {
new JTree("container", treeData);
};
</script></head>
<body>
<div id="container"></div>
</body>
</html>

重新改了下，代码更简洁
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php</title><script type="text/javascript"> var treeData = [{
id: 1,
name: "学术和教育",
children: [
{
id: 2,
name: "自然科学",
children: null
},
{
id: 3,
name: "社会科学",
children: [
{
id: 4,
name: "建筑学",
children: null
}
]
},
{
id: 4,
name: "哲学",
children: [
{
id: 4,
name: "建筑学",
children: null
}
]
}
]
},
{
id: 5,
name: "科技与发明",
children: [{
id: 6,
name: "导弹",
children: [
{
id: 4,
name: "流体力学",
children: null
}
]
}]
}]; (function() {
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function createElement(tagName, styles, props) {
var tag = document.createElement(tagName);
if (styles) {
for (var styleName in styles) { if (isIE && styleName == "cssFloat") {
styleName = "styleFloat";
}

tag.style[styleName] = styles[styleName];
}
} if (props) {
for (var prop in props) {
tag[prop] = props[prop];
}
} return tag;
} function addNode(currentObj, parentNode) { var dlTag = createElement("dl");
var ddTag = createElement("dd", {
cursor: "pointer"
}, {
id: currentObj.id
});
var textNode = document.createTextNode(currentObj.name);
var childTag = createElement("div", {display: "none"});
var children = currentObj.children;
if (children) {
for (var index = 0; index < children.length; index++) {
addNode(children[index], childTag);
}
} ddTag.onclick = function(e) {
var event = e || window.event; if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}

var childrenDivs = this.getElementsByTagName("div"); if (childrenDivs[0] && childrenDivs[0].style.display == "none") {
childrenDivs[0].style.display = "block";
} else {
for (var index = 0; index < childrenDivs.length; index++) {
childrenDivs[index].style.display = "none";
}
}
};

ddTag.appendChild(textNode);
ddTag.appendChild(childTag);
dlTag.appendChild(ddTag);
parentNode.appendChild(dlTag);
} JTree = function(containerId, datas) {
var container = document.getElementById(containerId); for (var index = 0; index < datas.length; index++) {
addNode(datas[index], container);
}
};
})();
window.onload = function() {
new JTree("container", treeData);
};
</script></head>
<body>
<div id="container"></div>
</body>
</html>

这东西就能进baidu呵呵呵。哈哈哈一看发帖时间是3.31而不是4.1不知是不是提前过愚人节呢

不错! 代码很简洁. 不过, 有点小瑕疵, 那就是收缩再展开后, 并没有恢复到收缩前的状态, 和一般的体验不一致. 兄弟要是有兴趣, CSS也不错的话, 可以试投一下前端相关的职位.

百度代理公司的飘过
这个我弄过几个,没什么难度,不过确实很需要比较全面的知识
需要逆着去推,知道怎样可以构造一个收缩展开的html+css, 攥写配套js, 然后要写个php类来能够根据传入的数组构造html进行输出. 自己弄实现,不依赖现成的,会有个地方比较费时间
弄那种虚线的对准的css

比如这个？http://hr.baidu.com/www/job/jobDetail.action?jobId=1966

用php实现起来，好像没有js的速度快

输出html直接用php比较方便.用函数,输入一个符合特定要求的数组后,递归输出html当然也可以php输出json, 用js在前端组装效果,不过这样的话操作比较复杂

晕，估计这水平进百度也就是个打杂的要不然就是百度做web的水平太次了再不然就是LZ出来忽悠人的

调试易

史上最强大的PHP Web面试题(会做就能进百度)

解决方案 »