Get the attribute of the item that was clicked.

Question

Hello! There is a table:

<tr class="tablesorter-headerRow" onclick="sortTable();"> <!--<td data-column="0" class="tablesorter-header" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner"><input type = "checkbox" name = "lol"></input><i class="tablesorter-icon tablesorter-icon"></i></div></td>!--> <td data-column="0" class="tablesorter-header" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">№<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="1" class="tablesorter-header tablesorter-headerAsc primary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Cмс<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="2" class="tablesorter-header tablesorter-headerAsc secondary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Номеров<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="3" class="tablesorter-header tablesorter-headerAsc tertiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Время создания<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="4" class="tablesorter-header tablesorter-headerAsc fourtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Периодичность<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="5" class="tablesorter-header tablesorter-headerAsc fivetiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Имя отправителя<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="6" class="tablesorter-header tablesorter-headerAsc sixtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Сообщение<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="7" class="tablesorter-header tablesorter-headerAsc seventiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Начало отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="8" class="tablesorter-header tablesorter-headerAsc eight" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Окончание отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="9" class="tablesorter-header tablesorter-headerAsc nine" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Действие<i class="tablesorter-icon tablesorter-icon"></i></div></td> </tr>

You need to get the data-column attribute of data-column clicked on. I do this:

 function sortTable() { var attr = $(this).attr("data-column"); alert(attr); }

Displays undefined . What am I doing wrong?

Qwertiy ♦ Qwertiy 76k 17 73 199 · Accepted Answer · 2016-12-17T05:33:49

Use ascent subscription:

 $('table').on('click', 'td', function() { console.log($(this).data("column")); });

 <table> <tr class="tablesorter-headerRow"> <td data-column="0" class="tablesorter-header" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">№<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="1" class="tablesorter-header tablesorter-headerAsc primary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Cмс<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="2" class="tablesorter-header tablesorter-headerAsc secondary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Номеров<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="3" class="tablesorter-header tablesorter-headerAsc tertiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Время создания<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="4" class="tablesorter-header tablesorter-headerAsc fourtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Периодичность<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="5" class="tablesorter-header tablesorter-headerAsc fivetiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Имя отправителя<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="6" class="tablesorter-header tablesorter-headerAsc sixtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Сообщение<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="7" class="tablesorter-header tablesorter-headerAsc seventiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Начало отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="8" class="tablesorter-header tablesorter-headerAsc eight" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Окончание отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="9" class="tablesorter-header tablesorter-headerAsc nine" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Действие<i class="tablesorter-icon tablesorter-icon"></i></div></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

I do <td data-column="255" class="tablesorter-header tablesorter-headerAsc primary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Cмс<i class="tablesorter-icon tablesorter-icon"></i></div></td> and it issues 1

Answer 2 · 2016-12-17T03:03:13

We need a cell attribute, so we handle a cell event. Then $(this) will point to the clicked cell.

 $('td').click( function() { var attr = $(this).data("column"); alert(attr); })

 <table> <tr class="tablesorter-headerRow"> <td data-column="0" class="tablesorter-header" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">№<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="1" class="tablesorter-header tablesorter-headerAsc primary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Cмс<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="2" class="tablesorter-header tablesorter-headerAsc secondary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Номеров<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="3" class="tablesorter-header tablesorter-headerAsc tertiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Время создания<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="4" class="tablesorter-header tablesorter-headerAsc fourtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Периодичность<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="5" class="tablesorter-header tablesorter-headerAsc fivetiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Имя отправителя<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="6" class="tablesorter-header tablesorter-headerAsc sixtiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Сообщение<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="7" class="tablesorter-header tablesorter-headerAsc seventiary" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Начало отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="8" class="tablesorter-header tablesorter-headerAsc eight" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Окончание отправки<i class="tablesorter-icon tablesorter-icon"></i></div></td> <td data-column="9" class="tablesorter-header tablesorter-headerAsc nine" tabindex="0" unselectable="on" style="-webkit-user-select: none;"><div class="tablesorter-header-inner">Действие<i class="tablesorter-icon tablesorter-icon"></i></div></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

For data-* attributes, jQuery has a .data() method . By the way, he himself cites the values of these attributes to Javascript data types.
Console more convenient alert. She is able to substitute values in the format string , shows her story and does not force to press OK in each case.

 var total = 0; $('table').click( function() { console.log( 'table %s', $(this).data("table") ); }) $('tr').click( function() { console.log( 'row %s', $(this).data("row") ); }) $('td').click( function() { var column = $(this).data("column"); total += column; console.log( 'column %s, total %s', column, total ); })

 td { padding: 3px 9px; } table:hover { background: #ccc; } tr:hover { background: #999; } td:hover { background: #333; color: #fff; cursor: pointer; }

 <table data-table="one"> <tr data-row="first"> <td data-column="1">1</td> <td data-column="2">2</td> <td data-column="3">3</td> <td data-column="4">4</td> <td data-column="5">5</td> <td data-column="6">6</td> <td data-column="7">7</td> </tr> <tr data-row="second"> <td data-column="1">1</td> <td data-column="2">2</td> <td data-column="3">3</td> <td data-column="4">4</td> <td data-column="5">5</td> <td data-column="6">6</td> <td data-column="7">7</td> </tr> </table> <table data-table="two"> <tr data-row="first"> <td data-column="1">1</td> <td data-column="2">2</td> <td data-column="3">3</td> <td data-column="4">4</td> <td data-column="5">5</td> <td data-column="6">6</td> <td data-column="7">7</td> </tr> <tr data-row="second"> <td data-column="1">1</td> <td data-column="2">2</td> <td data-column="3">3</td> <td data-column="4">4</td> <td data-column="5">5</td> <td data-column="6">6</td> <td data-column="7">7</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

"therefore we handle the event of the cell" - brrrrrr .. No, it is not necessary.
And it's better because there is only one handler there and it can work with dynamically added strings without additional efforts.
Here are more about the differences between .click() and .on() (in English).

Get the attribute of the item that was clicked.

2 answers 2

More articles: