Javascript Iteration of table

Question

Please help!

I'm trying to get the individual value of a row's value from my table. I'm using Javascript to show the value when the function is called from clicking the button beside the value in the table.

This is what the table look likes:

Name_1 737 <button>Run JS</button>
Name_2 729 <button>Run JS</button>
Name_3 730 <button>Run JS</button>

This is the file:

<table>
<?
$sql = mysql_query("SELECT * FROM clients WHERE id = '1'");

while($row = mysql_fetch_array($sql)){
$name = $row['client_name'];
$c_id = $row['client_id'];

$id_array[] = $c_id; 

echo '<table id="myTable">
        <tr>
            <td>'.$name.'</td>
            <td class="client_id">'.$c_id.'</td>
        <td><button onclick="js_function()">Run JS</button></td>
    </tr>
    </table>';
}
?>
</table>

<script>
var c_id = document.getElementsByClassName("client_id");

function js_function() {
for(var i = 0; i < c_id.length; ++i){   
    var client_id = c_id[i].innerHTML;
    }
document.write(client_id);
}
</script>

When I click any of the buttons showing in the table I always end of up with the value: 730 which is the same value as c_id[2].innerHTML;

Seems from your code that you iterate through each element with class "client_id" in js_function, so if you assign client_id to the element's innerHtml through each iteration, of course the value of client_id will be always the same: the innerHtml of the last element in c_id . Shankar seems to have solved you problem as well, so just wanted to make sure you understood what were you doing wrong. — juvian
– juvian, Commented Feb 21, 2014 at 1:33

ShankarSangoli · Accepted Answer · 2014-02-21 01:31:06Z

1

If all you want is the client id on button click, why don't you just pass the client Id to the js function itself when you are rendering it?

<td><button onclick="js_function("'.$c_id.'")">Run JS</button></td>

and in the js function you can directly get it on button click.

function js_function(clientId) {
   alert(clientId);
}

answered Feb 21, 2014 at 1:31

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

mattchambers Over a year ago

THANK YOU! I've been working on this for weeks! I just feel so stupid that it was just that easy...I appreciate it :D

Barmar · Accepted Answer · 2014-02-21 01:33:06Z

0

Add a parameter to js_function() to identify the row:

$i = 0;
while($row = mysql_fetch_array($sql)){

    $name = $row['client_name'];
    $c_id = $row['client_id'];

    $id_array[] = $c_id; 


    echo '
      <table id="myTable">
      <tr>

      <td>'.$name.'</td>

      <td class="client_id" id="client_id_'.$i'">'.$c_id.'</td>

      <td><button onclick="js_function('.$i.')">Run JS</button></td>

      </tr>

      </table>';

}

JS:

function js_function(i) {
    var c_id = document.getElementById('client_id_' + i);
    var client_id = c_id.innerHTML;
    document.write(client_id);
}

answered Feb 21, 2014 at 1:33

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

Javascript Iteration of table

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