Get value of a loop generated table cell via onClick

[Scarecrow736]

Hello,

I am trying to get the value of a table cell that is generated by a php loop. The purpose is so eventually I can click a row out of a list and have it take me to a form view of the list item that is clicked. I've searched and searched for the last few days for something with no luck. I run across a lot of hits that tell me I need to have an id for everysingle thing I click on but there has to be a better way.

function as best I could make

function test() {
var elTableRow = document.getElementById("tr");
var elTableCells = elTableRow.getElementsByTagName("gtrpart");
alert(elTableCells[0].innerText);
}

and my loop

echo "<table class='info' border='2'align='center'width='1050px'>";

$color1 = "#CCCCCC";
$color2 = "#FFFFFF";
$row_count = 0;

echo "<tr class='tablehead'> <th style='display: none;'>GTR Part Number</th> <th>Part Number</th> <th>REV</th> <th>Description</th> <th>Customer</th> <th>Qty</th> <th>Location</th> </tr>";

while($row = mysqli_fetch_array( $result )) 

{
    $row_color = ($row_count % 2) ? $color1 : $color2;
    
    echo "<tr onClick='test()' class='data' bgcolor='$row_color'><td style='display: none;' align='center'>";  
    echo $row['gtr_part_number'];
    echo "</td><td align='center'>";
    echo $row['part_number'];    
    echo "</td><td align='center'>"; 
    echo $row['rev'];
    echo "</td><td align='center'>"; 
    echo $row['description'];
    echo "</td><td align='center'>"; 
    echo $row['customer'];
    echo "</td><td align='center'>"; 
    echo $row['qty'];
    echo "</td><td align='center'>"; 
    echo $row['location'];
    echo "</td></tr>";
    $row_count++; 

As you can see in my function I right now only want an alert box to pop up telling me the value of the cell I clicked on. Is there a way to do this?

Any help would be greatly appreciated

Thanks,
Austin

[WolfShade]

Every element should have a unique id, yes. That is how you tell JavaScript what "container" to give you the value, or contents, of.

^_^

[Scarecrow736]

So then how would I call a specific row when I click it? lets say I set the whole table row to a unique value that it gets from the loop, how would I call that specific row from my function without having 1000+ functions?

[WolfShade]

<tr>
<td id="gtr_num_1" onclick="functionName(this.id);"></td>
<td id="part_num_1" onclick="functionName(this.id);"></td>
<td id="rev_1" onclick="functionName(this.id);"></td>
<td id="description_1" onclick="functionName(this.id);"></td>
...
</tr>
<tr>
<td id="gtr_num_2" onclick="functionName(this.id);"></td>
<td id="part_num_2" onclick="functionName(this.id);"></td>
<td id="rev_2" onclick="functionName(this.id);"></td>
<td id="description_2" onclick="functionName(this.id);"></td>
...
</tr>

function functionName(tid) { // tid is the variable that contains the ID of the cell calling the function..
  var thisContent = document.getElementById(tid).firstChild;
alert(thisContent);
 }

^_^

PS.. if you want CELL text, you don't put the ID on the TR, you put it on the TD.

[Scarecrow736]

Ok I tried doing that I copy pasted the function you wrote and modified my loop to this..

while($row = mysqli_fetch_array( $result )) 

{
    $row_color = ($row_count % 2) ? $color1 : $color2;
    $gtrpart = $row['gtr_part_number'];
    $part = $row['part_number'];
    echo "<tr class='data' bgcolor='$row_color'><td id='" . $gtrpart . "'onClick='functionName(this.id)'; style='display: none;' align='center'>"; 
    echo $row['gtr_part_number'];
    echo "</td><td id='" . $part . "' onClick='functionName(this.id)'; align='center'>";
    echo $row['part_number'];
.... 

the alert works fine but instead of getting a value like I'm expecting I'm getting

"[object text]"

so what am I doing wrong?

and thank you you're keeping me from pulling my hair out

[Kor]

var thisContent = document.getElementById(tid).firstChild;

No. A textNode is an Element/Object as well. Should be:

var thisContent=document.getElementById(tid).firstChild.nodeValue;
//or
var thisContent=document.getElementById(tid).firstChild.data;
//or
var thisContent=document.getElementById(tid).innerText||document.getElementById(tid).textContent; // IE||full DOM compliant browsers

But if the container element has no textNode - is empty - not even a blank space within (like <td></td>) all those will return "undefined".

[WolfShade]

^ What he said ^

[Kor]

^ What he said ^

? What he said what? I saw your code, and I have noticed that it is not correct. A textNode is an object, thus if you want to return its "stringed content" you must do it properly.

[WolfShade]

Learn to speak American, Kor.. I am agreeing with you. The arrows were pointed to YOUR post.

^_^

[Scarecrow736]

That worked beautifully

Thank you both so much!

I think I might owe you guys a six pack

[WolfShade]

Glad you got it working, don't worry about the sixer - I'm in STL(MO), Kor is in Romania. But thanks for the thought.

^_^

[Scarecrow736]

Either way thanks again

I'm sure I'll be back though with another question!

[Kor]

Learn to speak American, Kor.. I am agreeing with you. The arrows were pointed to YOUR post.

^_^

Since when the arrows are "American" ?

Just kidding. No offense Anyway, I am proud about my British English, so... you know...

[WolfShade]

Funny, I didn't see a British accent.

[Kor]

Funny, I didn't see a British accent.

The British accent is never to be seen. It is to be heard