CODEWITHSUNDEEP
javascriptphpjqueryarrays
Alexis
Alexis

Reputation: 209

How to put items from table into an array jquery

Let's suppose I have a table that is iterated through foreach loops and the items are coming from database.

for instance,

<table>
    <?php while($row = $result->fetch_assoc()){?>
    <tr>
      <td><?php echo $row['id'] ?></td>
      <td><?php echo $row['name'] ?></td>
      <input type="button" name="add" />
    </tr>
    <?php }?>
</table>

Now there is a button in every row that would be iterated and what I want that when I click add that specific item should be added in an array or a list. It would allow me to add as many items as I want and then at the end I would insert them in database with just one click.

I studied jQuery in class but couldn't learn much. Since it is client-side scripting language thus this thing would only be achieved by this I guess.

Can someone care to help? Thank you :)

Upvotes: 2

Views: 131

Answers (1)

Ashraful Islam
Ashraful Islam

Reputation: 935

check my example. run the snippet for testing. u will get the array of ids on every click on add button. then u can just add another button to submit, and on the click event of that button u can just make an ajax call to your php file with the array as data.

$(document).ready(function(){
  var array_ids = [];
  $('.add_button').click(function(){
    array_ids.push($(this).parent().siblings('.row_id').html().trim());
    alert(array_ids);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
      <td class="row_id">1</td>
      <td>one</td>
      <td><button class="add_button">Add</button></td>
    </tr>
  <tr>
      <td class="row_id">2</td>
      <td>two</td>
      <td><button class="add_button">Add</button></td>
    </tr>
    <tr>
      <td class="row_id">3</td>
      <td>three</td>
      <td><button class="add_button">Add</button></td>
    </tr>
  <tr>
      <td class="row_id">4</td>
      <td>four</td>
      <td><button class="add_button">Add</button></td>
    </tr>
</table>

Upvotes: 1

Related Questions