将选定的行从 html 表加载到数组

Question

我的任务的一些上下文 - 用户看到一个表并选择要通过 sql 上传到主 sql 表的行。

我的问题 - 我需要能够仅将表中选定的行加载到数组中。

现在我只能将整个表加载到 Javascript 中的数组中，然后将其发布到 php 页面，然后 print_r 数组，我可以通过这段代码获取所有值：

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>';

我已经尝试了多种方法来仅获取选定的行，例如从以下位置更改此行：

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

到这里：

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

但是我的数组输出什么也没返回。

我也尝试过类似的方法，但也没有成功

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>";

选择行的点击事件：

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

提交活动表单：

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>';

我对 Javascript/Jquery 很陌生，所以我边走边学。

任何有关这方面的帮助或建议将不胜感激。

Answer 1

每次单击 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">