2016-11-18 60 views
0

我有一张表格,并且在每行添加了一些属性,稍后我需要获取这些属性,当我单击jQuery的行时。jQuery如何从html标记属性中构建json对象

这里是一个<tr>元件的一个示例:

<tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR"> 
    <td class="sorting_1" tabindex="0">ID 01</td> 
    <td>This is a custom descriptiion</td>             
</tr> 

我想建立一个基于data.*属性还要加入该列值的json对象。

因此,在这个例子中,我希望得到的东西是这样的:

{'employeeid':'4', 'access':'none', 'area':'HR', 'data1':'ID 01', 'data2':'This is a custom description'} 

任何线索?

+0

这是完全无效的,它应该是'数据access'等 – adeneo

+0

@ adeneo你是什么意思?感谢你的反馈 – VAAA

+0

你不应该有属性与周期在其中,你应该使用数据属性,如在连字符 – adeneo

回答

1

如果您使用有效的数据属性

<tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR"> 

所有你需要的是$(element).data()让所有的人作为对象。
如果你想文本从所有的子元素添加为好,你可以扩展该对象

var tr = $('tr[data-id="1"]'); 
 
var data = tr.data(); 
 

 
$.extend(data, $('td',tr).toArray().reduce(function(a,b,i) { 
 
\t a['data' + (i+1)] = $(b).text(); 
 
    return a; 
 
}, {})); 
 

 
console.log(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr data-id="1" data-employeeid="4" data-acceess="none" data-area="HR"> 
 
     <td class="sorting_1" tabindex="0">ID 01</td> 
 
     <td>This is a custom descriptiion</td> 
 
    </tr> 
 
</table>

+0

我只能说:真棒,谢谢 – VAAA