How to execut a javascript function in a php table

Question

I am developing a small web page.

On this page I have a table and created a function that takes the id and returns an image.

Everything is working correctly, the issue is that whenever I click on a line that function is executed.

I just wanted the function to execute when I click on the attached column of id's. (Second Column)

Does anyone can help me please?

Realized my doubts?

Thank you all.

    <script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("td");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[1];
                                        var id = cell.innerHTML;

                                        //use ajax to post id to ajax.php file
                                        $.post("ajax.php", { id:id }, function( data ) { 
                                              //add result to a div and create a modal/dialog popup similar to alert()
                                              $('<div />').html(data).dialog();
                                        });

                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>

Well you are attaching it to every row, perhaps you should only attach it to the second cell using table.rows[i].cells[1] — Jonathon
– Jonathon, Commented Oct 17, 2014 at 10:07
you are adding the onclick event to the row. If you want the onclick event on second td, add that onclick event to second td — user733421
– user733421, Commented Oct 17, 2014 at 10:08
And you're on the right track using a function to create the click handler so you use the right row, but there's no reason to recreate that createClickHandler function on every loop iteration! Just create it once. — T.J. Crowder
– T.J. Crowder, Commented Oct 17, 2014 at 10:10
var rows = table.getElementsByTagName("td"); Um.... That'll give you every td, not every row. — T.J. Crowder
– T.J. Crowder, Commented Oct 17, 2014 at 10:11
Thank you all for reply's. I tried the code (table.rows[i].cells[1]) that @Jonathon say, but isn't working :S — rpirez
– rpirez, Commented Oct 17, 2014 at 10:14

T.J. Crowder · Accepted Answer · 2014-10-17 11:09:45Z

2

You're already using jQuery, so...let's use jQuery:

// Process the code on document ready
$(function() {
    // Hook "click" on the table, but only actually call the handler if the
    // click passed through the second cell in a row
    $("#tableId").on("click", "tr td:nth-child(2)", function() {
        // Do the post
        $.post("ajax.php", {
            id: $(this).text() // <== Getting the id by getting the text of the clicked cell
        }, function(data) {
            //add result to a div and create a modal/dialog popup similar to alert()
            $('<div />').html(data).dialog();
        });
    });
});

Differences:

We're doing it on document ready rather than window load, which is a lot earlier.
Using a delegated handler rather than a handler on each table cell.
Using :nth-child(2) to get the second td in the row. Note that this assumes you will only have cells in your row (which is 99.9999% true; template is allowed there too, though).
Using $(this).text() to get the id

Here's an example just showing the id rather than doing the $.post call:

// Process the code on document ready
$(function() {
    // Hook "click" on the table, but only actually call the handler if the
    // click passed through the second cell in a row
    $("#tableId").on("click", "tr td:nth-child(2)", function() {
        alert($(this).text());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableId">
  <tbody>
    <tr>
      <td>Foo</td>
      <td>23</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>42</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>67</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

edited Oct 17, 2014 at 11:09

answered Oct 17, 2014 at 10:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

rpirez Over a year ago

very thanks for your answer. I tried your code, but isn't work :S Doesn't retrieve anything...

rpirez Over a year ago

You know why this happen?

T.J. Crowder Over a year ago

@rpirez: I'm very surprised to see that jQuery interprets the tr td:eq(1) in what seems to be an incorrect way (only matches the second cell of the first row). But :nth-child works here, see the update.

rpirez Over a year ago

very thanks for you help. It work's fine. You save my day Sir :)

Ali Tariq · Accepted Answer · 2014-10-17 11:02:18Z

0

why you have not try with the id means give id of each td and whatever you want on the function of onclick you can do that

answered Oct 17, 2014 at 11:02

Ali Tariq

281 silver badge7 bronze badges

Comments

PaulH · Accepted Answer · 2014-10-17 11:06:47Z

0

put the click handler on the cell instead of the row

var currentRow = table.rows[i];
var cell = currentRow.getElementsByTagName("td")[1];
var createClickHandler = function(cell) 
    {
        return function() { 
            var id = cell.innerHTML;
            //use ajax to post id to ajax.php file
            $.post("ajax.php", { id:id }, function( data ) { 
                  //add result to a div and create a modal/dialog popup similar to alert()
                  $('<div />').html(data).dialog();
            });
         };
    };
cell.onclick = createClickHandler(cell);

edited Oct 17, 2014 at 11:06

answered Oct 17, 2014 at 10:16

PaulH

3,1392 gold badges19 silver badges34 bronze badges

2 Comments

rpirez Over a year ago

Thanks for reply. I tried you code, but give me that error: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\WEB\ajax.php on line 10

PaulH Over a year ago

mysql_fetch_array() is a php function. The first parameter must be a resource linking to a database. Maybe create a new stackoverflow question explaining your ajax.php for that.

Collectives™ on Stack Overflow

How to execut a javascript function in a php table

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related