Looping through HTML table and store td values as a string using jquery / javascript

Question

I have following table

while($row=mysql_fetch_array($sql)) 
{
    $id=$row['product_id'];
    $name=$row['name'];
    $stock=$row['stock'];
    ?>
    <tbody>
    <tr   >
        <td class="edit_td">
            <span id="first_<?php echo $id; ?>" class="text"><?php echo $name; ?></span>
        </td>
        <td class="edit_td">
            <span id="last_<?php echo $id; ?>" class="text"><?php if($stock==0){echo 0;}else{echo $stock;} ?></span>
        </td>
        <td class="edit_td1" id="<?php echo $id; ?>">
            <div class="form-group">
                <div class="col-lg-3 inputContainer">
                    <input class="form-control cls-quantity" id="quanti_<?php echo $id; ?>" name="number" type="text" />
                </div>
            </div>
        </td>
        <td class="action_td" id="<?php echo $id; ?>"><span class="glyphicon glyphicon-remove" style="cursor:pointer;color:red;"></span></td>
    </tr>
    </tbody>
    <?php
}
?>

And button:

<a href="customer_details.php?shop=<?php echo $_GET['shop'];?>" class="btn btn-info" role="button" onclick="return td_validation();store_value_as_string();">Generate Bill</a>

Question: Here I want to return a function store_value_as_string(); after td_validation(); which loop through all <tr> and get id of class="edit_td1" and associated value of id="quanti_<?php echo $id; ?>". Then function store_value_as_string(); will gives me two strings

str1 = 121,122,123,124;//id of class="edit_td1"

str2 = 2,3,1,4;//associated value of id="quanti_<?php echo $id; ?>"

these two strings are required for ajax call(pass to other php page). I actually have code for doing same but it runs onchange of ".edit_td1" but the sequence of operations by -->tester<-- i.e. onchange-blur(leave the textbox for same <tr> -onchange-blure-onchange... gives me wrong output.

Table look likes:

Imab Asghar · Accepted Answer · 2015-09-10 08:52:32Z

1

You might wanna use the Jquery each. Iterate over all td's with the class '.edit_td1'. Fetch their id's using .attr('id') and add to an array as well and then later use Jquery's Array join to get your desired output of str1.

For str2 with each loop, find input with the class '.cls-quantity' and get its value. Add that number to a list and then again use Array.join.

I hope my code works fine. Haven't debugged it.

function store_value_as_string(){
  var array1= new Array();
  var array2 = new Array();
  $('td.edit_td1').each(function(index, element){

    //Not sure if we need this line. 
    //Might need if we dont get the element in function's argument 
    //var element = this;

    array1.push($(element).attr('id'));


   //find might return an array so can use this line. I have not debugged it.
  array2.push($(element).find('input.cls-quantity')[0].val())
  //array2.push($(element).find('input.cls-quantity').val());
  });
 var str1 =  array1.join(',');
 var str2 =  array2.join(',');
}

edited Sep 10, 2015 at 8:52

answered Sep 10, 2015 at 6:54

Imab Asghar

3161 silver badge7 bronze badges

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

7 Comments

Vilas Over a year ago

I think your $('td.edit_td1').each(function(element) doesn't reach because function store_value_as_string() executes but alert(str1); alert(str2); alert(array1); alert(array2); didn't executes

Vilas Over a year ago

in function store_value_as_string(){alert("hi");//executes then, {--your code--},then alert("end");//doesn't executes. How?

Vilas Over a year ago

I think our problem is in $('td.edit_td1').each(function(element) because alert(element) alerts 0 .

Imab Asghar Over a year ago

did you try using 'this' keyword instead of element as mentioned in the comments section?

Vilas Over a year ago

alert(this) = [objectHTMLTableCellElement]

|

Collectives™ on Stack Overflow

Looping through HTML table and store td values as a string using jquery / javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related