Question

My question is! I am copying content from one table to another table and when I am doing this I need the function name to change to talentselect instead of driverselect which is attached to each table row. I still need to keep the variable values to parse. Just wondering if anyone can help me with this. I know that I should be binding the events to the elements with Jquery and not using OnClick but for now I need a solution to achieve this with the OnClicks.

Many Thanks!

The copying of the table

<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="odd" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
</table>

<table id="talentselectiontable" cellspacing="0">
</table>


$("#talentselectiontable").html($("#driverselectiontable .chosen").clone(true).attr("class","odd"));

So basically I am copying all of the table rows that have the class named “chosen” but upon doing so I need to change the function call name to “talentselect”. But each row in the table has different parameters being parsed which is allocated with PHP.

I have tried this piece of code but it is not working still

$("#talentselectiontable tr").attr("onclick").replace("driverselect", "talentselect");

Answer 1

I can’t see the actual HTML of your table, so this may be slightly incorrect, but should get you started.

$("#talentselectiontable tr").attr("onclick", "return talentselect(this, value, value);");

This whole problem would actually be a lot easier if you used event handlers rather than inline onclick attributes. You could then use the jQuery live() function (see http://api.jquery.com/live/) that would mean that JQuery would take care of changing the function for you. Your solution would look something like this:

$("#driverselectiontable tr").live('click', driverselect);
$("#talentselectiontable tr").live('click', talentselect);

And then whatever code to ensure that your cloning code gets called.

Edit: In response to the comment, it looks like this is what you’re after:

var clickval = $("#talentselectiontable tr").attr("onclick");
$("#talentselectiontable tr").attr("onclick", clickval.replace('driverselect', 'talentselect'));

That should get you going.

With a view to better JavaScript practice however, I would recommend another approach entirely. Rather than storing your parameter values in the ‘onclick’ attribute, store them in a data attribute. So your HTML would look something like this:

<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" data-myparam1="value" data-myparam2="value"><td>driver</td></tr>

And so on. You can then use JQuery to parse the values:

function driverselect() {
    var row = $(this),
        param1 = row.attr('data-myparam1'),
        param2 = row.attr('data-myparam2');

    // rest of the code goes here

}

Your markup will be cleaner, and you can use the live() jQuery functionality as described above.