作業の都合上、テーブルの特定の列にツリーの構造と効果を実装する必要がありました。初めて使用しましたが、難しかったです。 3 日間かけてプログラムを作成しました
機能要件は次のとおりです: + 記号をクリックすると、次のサブノードのみが展開されます。現在のノードのレベル ノードは展開されます。2 番目のレベル以下のノードは引き続き非表示になります。下のすべてのサブノードが非表示になります。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>
プロジェクトコスト
tdSubject.parent() は tr"#test").attr("test","aaa") // 設定
$(" # テスト").removeAttr("test") //
jsを削除します: var testEle = document.getElementById( "test" ) テストエレ.setAttribute(
"test","aaa"); // 設定 testEle.attributes[
"test"] ; // を入手してください 2.jquery
の selector $("#btnconfirm"); イベント バインディング関数:bind();
非表示関数: show(), hide();
要素の内部 HTML を変更します。 html("hello world");
3 ID tableData
$("#tableData").find("tr").each(function() { $(this).find("td").each(function() { alert($(this).text()); }); });
4 の未定義の type
var name; 名前);
//出力は未定義ですalert(typeof myname);
//出力は未定義ですalert(name=="unknown" ); //出力は false です
alert(name==unknown);// 出力は true です 未定義は 文字列ではなく型です
javascript元の値: Unknown、Null、Boolean、Number、String、
5、要素表示、非表示$(this).show(); $(this).toggle (); 自動的に非表示と表示を切り替えます
表示: toggle(true);$(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 中国語 Web サイトの他の関連記事を参照してください。