Load selected Rows from html table to Array

Question

Some context for my task - users see a table and select rows to then be uploaded via sql to the main sql table.

My question - I need to be able to only load the selected rows in my table to an array.

Right now I can only load the whole table to an array in Javascript and then post it to the php page and then print_r the array and I get all the values with this piece of code:

echo '<script>
    var myTableArray = [];
    $("#uploads_approval tr").each(function() {
        var arrayOfThisRow = [];
        var tableData = $(this).find("td");
            if (tableData.length > 0) {
                    tableData.each(function() { 
                        arrayOfThisRow.push($(this).text()); 
                    });
                        myTableArray.push(arrayOfThisRow);
                }

        });

        var selectedRows = document.getElementById("selectedRows");
        selectedRows.value = myTableArray;
</script>';

I have tried multiple things to only get the selected rows such as changing this line from:

  $("#uploads_approval tr").each(function() {

to this:

  $("#uploads_approval tr.selected").each(function() {

but then my array output returns nothing.

I have also tried something like this but also no success

echo "<script>
    var Array2 = [];
    $('#uploads_approval tr').each(function() {
    var tableData = $(this).find('td');
    for(i = 0; i < tableData.length; i++){
        tableData.each(function() { 
                    var thisRow = 
document.getElementByClassName('selected').Text();
                    array2.push(thisRow); 
                });

    }
    var selectedRows = document.getElementById('selectedRows');
    selectedRows.value = Array2;
}
</script>";

Click event for selecting rows:

echo "<script> $('#uploads_approval tr').click(function(){ $(this).toggleClass('selected'); }); </script>";

Form for Submit event:

echo '<form action="uploads_approval.php" method="post" >' . '<input 
type="hidden" name="uploadRows" id="uploadRows" value="1" /> &nbsp;'; echo 
'<button id="button" ">SELECT</button>&nbsp;'; echo '<input type="hidden" 
name="selectedRows" id="selectedRows" value="1" /> &nbsp;'; echo '</form>';

I am very new to Javascript/Jquery so I am learning as I go.

Any help or advice regarding this would be appreciated.

@madalinivascu It is in seperate script tags. echo "<script> $('#uploads_approval tr').click(function(){ $(this).toggleClass('selected'); }); </script>"; — Himera
– Himera, Commented Oct 23, 2017 at 7:56
Right now I just need the selected rows to be put in the array. Once that is working I can get the data to the db. My problem at the moment is I can only put all rows in the array not only the selected ones. — Himera
– Himera, Commented Oct 23, 2017 at 8:00

madalinivascu · Accepted Answer · 2017-10-23 11:33:34Z

1

update your values each time you click the tr

$('#uploads_approval tr').click(function(){

 $(this).toggleClass('selected');
 var row = [];
 $('.selected').each(function(i,v){
     row.push($(v).text());
  });
  $('#selectedRows').val(row);
 });

$('#uploads_approval tr').click(function() {

  $(this).toggleClass('selected');
  var row = [];
  $('.selected').each(function(i, v) {
    row.push($(v).text());
  })

  $('#selectedRows').val(row);
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br>
<table id="uploads_approval">
  <tbody>
    <tr>
      <td>tr1</td>
    </tr>
    <tr>
      <td>tr2</td>
    </tr>
    <tr>
      <td>tr3</td>
    </tr>
    <tr>
      <td>tr4</td>
    </tr>

  </tbody>
</table>
<input type="text" id="selectedRows">

edited Oct 23, 2017 at 11:33

answered Oct 23, 2017 at 8:02

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

7 Comments

Himera Over a year ago

Thank you, looking at it now. Would you mind explaining what this does? $('#selectedRows').val(row);

madalinivascu Over a year ago

its the jquery equivalent to var selectedRows = document.getElementById('selectedRows'); selectedRows.value = Array2;

Himera Over a year ago

Doesnt seem to be working. The rows are no longer being selected after adding that bit of code. $('#uploads_approval tr').click(function(){ $(this).toggleClass('selected'); var row = []; $('.selected').each(function(i,v){ row[] = $(v).val(); }); $('#selectedRows').val(row); });

Himera Over a year ago

Nah same thing. What is the i,v in the function for? $('.selected').each(function(i,v){ Sorry im asking a lot of questions because im trying to understand it instead of just copying it in.

madalinivascu Over a year ago

i is the index, v is the value

|

Collectives™ on Stack Overflow

Load selected Rows from html table to Array

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