Search code examples
javascriptjqueryhtml-table

Passing js array as a parameter to dynamically created table row's onclick event function

I create a table dynamically and i want to pass js array to row;

var html= "<table id='tableID'><thead>...</thead><tbody></tbody></table>";
var jsArray = [{id: 1, val: "test"},{id: 2, val: "test2"}];
    
html+= '<tr onclick="myFunction('+jsArray+')"></tr>'
    

$('#tableID tbody').append(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableID">
  <tbody></tbody>
</table>

I tried JSON.stringify(jsArray) then pass it but it doesn't work. Maybe I can change " with " but it doesn't looks best practice.

Solution

  • The reason JSON.stringify(jsArray) doesn't work is because the result includes double quotes, and as the value of the onclick attribute, it is put inside double quotes already. So, it should work if you use single quotes. Try changing onclick="..." to onclick='...'