Get data from <td> on the same table row specified by row id and perform computation

Question

I have an html table populated by data coming from a mysql database. This is the structure:

<table>    
<?php
foreach($prods as $key=>$p){
?>
   <tr class="row1" id="tr<?php echo $p['ProductID']?>">
   <td id="pid<?php echo $p['ProductID']?>"><?php echo $p['ProductID']?></td>
   <td id="pname<?php echo $p['ProductID']?>"><?php echo $p['ProductName'];?></td>
   <td id="pdesc<?php echo $p['ProductID']?>"><?php echo $p['ProductDesc'];?></td>
   <td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td>
   <td><input type="checkbox" id="chk<?php echo $p['ProductID']?>" checked></td>
   <td><input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo    $p['ProductID']?>"></td>
   <td><input type="text" style="width:50px;" id="total<?php echo $p['ProductID']?>">    </td>
   <span id="ttl" name="ttl"> 0.00</span>
   </tr>
   <?php
   }
   ?>
   </table>

I don't have issues populating the table, however I need to update the <span id="ttl"> value, every time the user changes the value of the <input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td> <input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td> <input type="text" style="width:50px;" onkeyup="getall(this);" id="<?php echo $p['ProductID']?>"></td> . I made a Javascript function but I fail doing what I want.

The value of the span should be the product of <td id="pprice<?php echo $p['ProductID']?>"><?php echo $p['UnitPrice'];?></td> and the quantity entered by the user at the textbox.

I will soon save these data back into the database once all fields are filled.

Answer 1

Not sure if this is used correctly. Just try something like:

<input type="text" style="width:50px;" onkeyup="getall('<?php echo $p['ProductID']?>');" id="<?php echo $p['ProductID']?>"></td>

And in your javascript function:

function getall(strId)
{
    var tmpObj = document.getElementById(strId);
    alert("reported id for testing: " + tmpObj.getAttribute("id"));
}

Try that.