循环使用HTML表并使用jquery / javascript将td值存储为字符串

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<-- ie onchange-blur(leave the textbox for same <tr> -onchange-blure-onchange... gives me wrong output.

Table look likes:

Answer 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(',');
}