jQuery Как создать json-объект из атрибутов html-тега

Question

У меня есть таблица, и в каждой строке я добавляю некоторые атрибуты, которые мне нужно получить, когда я нажимаю на строку с jQuery.

Вот образец <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> 

Я хотел бы построить json объект на основе data.* атрибутов, но также и при добавлении значений столбцов.

Таким образом, в этом примере я хотел бы получить что-то вроде этого:

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

Любой ключ?

Answer 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>