How to pass parameters to function on dynamic row click event

Question

I have a search button on body. On this search button click i am calling the button click event as:

$(document).ready(function() {

   //On Search Button click, this function creates dynamic tables.
   $("#searchBtn").click(function() {
        var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
        var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j");

        var table = $('<table></table>').addClass('table');

        for (i = 0; i < numArray.length; i++) {
          var tbody = $('<tbody></tbody>');
          var row = $('<tr></tr>');
          var num = numArray[i];
          var alpha = alphaArray[i];
          row.on("click", function() {
            selectRow(num, alpha);
          });

          var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]);
          var cell2 = $('<td></td>');
          var button;
          if (alpha[i] == "b") {
            button = $('<button type="button">').addClass('btn btn-primary').text('BOY');
          } else if (alpha[i] == "g") {
            button = $('<button type="button">').addClass('btn btn-success').text('GIRL');
          } else if (alpha[i] == "h") {
            button = $('<button type="button">').addClass('btn btn-warning').text('HI');
          }

          cell2.append(button);
          row.append(cell1);
          row.append(cell2);
          tbody.append(row);
          table.append(tbody);
        }

        $('#searchTable').append(table);
    });

Now on individual row click i am calling a function selectRow(num,alpha) which expects two paramters as:

function selectRow(num,alpha){
            $(document).ready(function() {              
                    alert("Number and Alphabet is  "+num + alpha );
});

But when the control comes to the above function the alert always prints the last record of both the array.

What am i doing wrong? Looking forward to your answers.

Remove $(document).ready(function() { from selectRow function. You don't need that there. — Satpal
– Satpal, Commented Jan 6, 2015 at 7:39
I removed $(document).ready(function() { from selectRow function but still i am getting the last records — Roy
– Roy, Commented Jan 6, 2015 at 7:41

Rohan Kumar · Accepted Answer · 2015-01-06 07:58:13Z

Try to pass this in your function and use data-* attribute.

Also in your code you are creating multiple tbody for a single table, use the below 2 lines before your loop like,

var tbody = $('<tbody></tbody>');
tbody.append(row);

function selectRow(ths){
   alert("Number and Alphabet is  "+$(ths).data('num') + $(ths).data('alpha'));
};
$(function () {
    $("#searchBtn").click(function () {
        var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
        var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j");

        var table = $('<table></table>').addClass('table');
        var tbody = $('<tbody></tbody>');
        table.append(tbody);
        for (i = 0; i < numArray.length; i++) {
            var num = numArray[i];
            var alpha = alphaArray[i];
            var row = $('<tr data-num="'+num+'" data-alpha="'+alpha+'"></tr>');
            row.on("click", function () {
                selectRow(this);
            });

            var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]);
            var cell2 = $('<td></td>');
            var button;
            if (alpha == "b") {
                button = $('<button type="button">').addClass('btn btn-primary').text('BOY');
            } else if (alpha == "g") {
                button = $('<button type="button">').addClass('btn btn-success').text('GIRL');
            } else if (alpha == "h") {
                button = $('<button type="button">').addClass('btn btn-warning').text('HI');
            }
            cell2.append(button);
            row.append(cell1);
            row.append(cell2);
            tbody.append(row);
        }
        $('#searchTable').append(table);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="searchBtn">Search</button>
<div id="searchTable"></div>

Van · Accepted Answer · 2015-01-06 07:44:15Z

0

Try replacing these lines :

var row = $('<tr></tr>');
var num =numArray[i];
var alpha =alphaArray[i];
row.on("click", function () {
  selectRow(num, alpha);
});

with this code:

var num =numArray[i];
var alpha =alphaArray[i];
var row = $('<tr onclick="selectRow(' + num + ',' + alpha + ');"></tr>');

answered Jan 6, 2015 at 7:44

Van

6105 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to pass parameters to function on dynamic row click event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related