由於工作需要，要求實現在table中的某一列有樹的結構和效果，不得已使用jquery，第一次用，寸步難行 一段程序憋三天，終於湊合著實作了
功能要求如下：
點選+號，下面的子節點展開，只展開目前節點的下一層節點，二級及以下節點仍隱藏
點擊-號，下面的所有子節點隱藏
#點擊1 2 3 4 會對應的展開到第一級節點，展開到第三級，展開到第四級。
我的想法是：使用最原始的拼接html ，取得資料來源以後，給tr賦值自訂屬性，例如目前行資料的code 、parentcode，是否是葉子節點的標識，目前資料行的level 等等我能用到的屬性，至於加減號以及文字的縮排我是用jquery實現的。第二個td裡面加入兩個span，第一個控制縮排字符，第二個控制+-號，因為頁面的要求是點擊+-時才折疊、展開，而不是點擊td展開折疊。
貼一段程序，幫助我理解jquery
function setIndentText() {
$("#tableData tr:gt(0)").
each(function() {//橘色部分是查找id为
tableData
的DataTable里面除第一行以外的行
var ifEndNode = $(this).attr("IfEndNode"); //获取行的属性值。是否是根节点 False True
var costLevel = $(this).attr("CostLevel"); //当然节点的级别
var tdSubject = $(this).find("td:eq(1)");//在这一行里面定位行的第一个td
var indentSpace = " ";
var tdText = tdSubject.text();//获取这个td的text，里面即使有span nobr 获取的也是文字，不是html
for (var i = 0; i < costLevel; i++) {
indentSpace += indentSpace;
}
if (ifEndNode == "False") {
tdSubject.children().html("<span>" + indentSpace + "</span><span class=\"plus\" style=\"CURSOR: hand\" onclick=\"tdClick(this);\">[-]</span>" + tdText);
}
})
}<td style="cursor:hand"> <nobr onmouseover ="this.title = this.innerText.replace(/ /g,'').replace(/ /g,'').replace('[+]','').replace('[-]','')" > <span></span> <span style="CURSOR: hand" onclick="appGridTree.doExp(this);"></span> 项目成本</nobr> </td>
如果是這樣一個td，取得到td的對象，
tdSubject.children()就是
tdSubject.children().html() 就是兩個span的html
tdSubject.text();就是專案成本這幾個字
tdSubject.parent() 是取得tr
#1、 js為tr 增加一些屬性,自訂屬性不知道行不行？ ？
jquery 的：$(##"#test").attr("test", "aaa") ##// 設定 # $(
"#test").removeAttr("test") #// 刪除
js的：var testEle = document.getElementById("test") testEle.setAttribute(
"test","aaa"); // 設定 #testEle.attributes[
"test"].nodeValue; // 取得 #2.jquery 的選擇器$("#btnConfirm")
事件綁定函數：bind();
隱藏顯示函數：show() 、hide();
##修改元素內部html ：html("hello world");3 遍歷 id 為tableData 的table裡面所有td$("#tableData").find("tr").each(function() {
$(this).find("td").each(function() {
alert($(this).text());
});
});var name; alert(
typeof name); //輸出為undefined alert(
typeof## myname);#//輸出為undefined alert(name==#"undefined"
);##//輸出為false alert(name==undefined);//輸出為true
undefined是一種類型，不是字串
javascript 中有五種原始值：Undefined,Null,Boolean,Number,String，
5、元素顯示、隱藏$(this).show(); $(this).hide(); $(this).toggle();自動切換隱藏顯示
顯示：toggle(true);隱藏：toggle(false);
$(this).slideDown("slow")；缓慢滑动的效果显示
$(this).slideUp("slow")缓慢滑动的效果隐藏
$(this).slideToggle();缓慢滑动的显示或隐藏
6、增加css
如果是css，$(this).css("background", "#f9edf1");
如果是class， $(this).addClass("classname");
7 append 与appendto用法的区别
$("#button1").click(function(){$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#p1");});
$("#button1").click(function(){$("#p1").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");});$(html字符串).appendTo(某个控件)；$(某个控件).append(html字符串);
8、调试同事的一个bug，发现Append这个方法的真正用法
append() 方法在被选元素的结尾（仍然在内部）插入指定内容
关键就在这个“仍然在内部”，比如tr.append ，就是在这个结束标记里面附加字符串，不是在外面
9、今天使用了after函数，跟append（）相对应的 ，在某个元素后面附加相应的东东；$("#tblId").find("tr[id]:last") 查找table中凡是有id属性的最后一个tr元素
10、$("#tableId").find(tr[id]:last) 遍历table下面的tr 不仅遍历table中tr，也遍历table里面嵌套的table的tr，也就是说遍历table里面所有的tr标签，不分层级关系
11、Query.each(obj,callback) //这个函数用了很多次了，没有真正理解其中的意思，现在了解了
以上是jquery 樹形結構實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
