H5新特性之data-*
阿新 • • 發佈:2018-11-02
htm ray 自動 ccf ava null spa sta ive
簡單介紹:html5的data-*能夠為標簽添加一些自定義的屬性和值,並且這種自定義的屬性和值可以通過js來獲取,十分的便捷
代碼:
//html代碼
<tr th:each="plan : ${list}" th:id="${plan.planId}"
th:attr="data-plan-status=${plan.planStatus},data-name=${plan.planName}">
<td></td>
<td></td>
</tr>
//js代碼取值
<script type="text/javascript">
//獲取table選中的tr行的節點 .active 被選中 類似class選擇器
var nodes = $(‘#table1‘).DataTable().rows(".active").nodes();
var statusArray = new Array();
var nameArray = new Array();
var idArray = new Array();
if(CommnUtil.notNull(nodes)){
for(var i = 0; i,nodes.length; i++ ){
var planStatus = $(nodes[i]).data(‘planStatus‘);
var planName = $(nodes[i]).data(‘name‘);
var id = $(nodes[i]).attr(‘id‘);
statusArray[i] = planStatus;
nameArray[i] = planName;
idArray[i] = id;
}
}
//後邊省略
</script>
說明:data-name取值就是普通的那種取值data(‘name‘) 而 data-plan-status取值的話就必須是data(‘planStatus‘),第二個符號“-”後邊的首字母會自動轉為駝峰(大寫),h5的新特性之一。
另外 attr這個玩意兒用來設置或者取得某個屬性的值,如果標簽中有某個屬性,js要獲得這個屬性的值,直接.attr(‘屬性名‘),想為標簽設置自定義的屬性,直接在標簽中attr = "data-xxx"就行
H5新特性之data-*