How to pass parameters from dynamic table to the event handler without inline javascript hanlder

Question

As I heard, I should avoid using inline javascript handler on html. e.g. onclick = "FUNCTION_NAME".

If I have a table that is generated dynamically, Each row has a button for its own.

If I don't use incline Javascript function, how can I pass some parameters from the table to the event handler?
Maybe passing the data from the table cell is not very hard. What if some data is not shown on the table cell (for security reason), for example, a secret ID number that is used internally within the application and is not supposed to exposure on the html (Setting it in the invisible cell in the table is not safe because people who knows html can still inspect it). How can we pass those data that is not shown on the table from dynamic table to event handler in this case?

If we use inline click attribute, i.e. onclick="javascript_function(parameter_1, parameter_2)" on each row, that's fairly easy to pass any data I want, and I do not need to show those kinds of secure data on the html in order to pass it.

laruiss · Accepted Answer · 2014-09-12 15:06:04Z

1

If you use jQuery, I would recommand

<table class="with-val">
   <td data-val="17">17 points</td>
</table>

and

$('.with-val').on('click', 'td', function() {
  var val = $(this).data('val');
  console.log(val)       //17
});

This way (with the on(eventType, selector, handler) signature), you don't have to reset the events if rows are deleted or added, and the markup is much lighter (and it is considred best practice, as you add only one event handler for the whole table).

answered Sep 12, 2014 at 15:06

laruiss

3,8261 gold badge21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boris Zagoruiko · Accepted Answer · 2014-09-12 15:29:38Z

0

Giving markup

<td class="val" data-val="17">17 points</td>

you can get value from binding like this:

$('.val').on('click', function() {
    var val = $(this).data('val');
    console.log(val)       //17
});

For this:

Setting it in the invisible cell in the table is not safe because people who knows html can still inspect it

You must not send secure data in any way to frontend. User can stop your code with breakpoints, debug or anything else, and get this data even when it is not visible in html. In addition this data will be visible in responses for the requests that browser send

edited Sep 12, 2014 at 15:29

answered Sep 12, 2014 at 14:51

Boris Zagoruiko

13.2k15 gold badges53 silver badges80 bronze badges

Comments

Siddharth Patel · Accepted Answer · 2014-09-12 14:58:56Z

0

You can use click event to call a function, that does the task of getting the value of any paramater you wish. Hope this helps.

<td><button id="btn">Click me</button></td>
<td><input type="hidden" id="secret_id"></td>


$("#btn").click(function(){
   var id = $("#secret_id").val();
   alert(id);
});

answered Sep 12, 2014 at 14:58

Siddharth Patel

1931 gold badge2 silver badges15 bronze badges

Comments

Academia · Accepted Answer · 2014-09-12 19:21:41Z

This is a possible solution:

HTML:

<table border="1">
    <thead>
    <tr>
        <th>HEAD1</th>
        <th>HEAD2</th>
        <th>HEAD3</th>
    </tr>
    </thead>
    <tr>
        <td class="hiddenField">row1 col1</td>
        <td>row1 col2</td>    
        <td><button class="seeHidden">btn1</button></td>
    </tr>
        <tr>
        <td class="hiddenField">row2 col1</td>
        <td>row2 col2</td>
        <td><button class="seeHidden">btn2</button></td>
    </tr>
</table>

CSS:

th:nth-child(1), td:nth-child(1){
    display: none;
}

jQuery:

$(".seeHidden").click(function(){
    var hiddenField = $(this).parent()
                             .siblings("td.hiddenField")
                             .html();
    alert(hiddenField);
});

Check this link jsfiddle to see a working example.

Hope it's useful!

Collectives™ on Stack Overflow

How to pass parameters from dynamic table to the event handler without inline javascript hanlder

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related