如何将动态生成的表值发送回服务器？

Question

I have my index.php where I'm going to make an Ajax request to the server and display the response (as a table).

<div id="result"></div>

<script>
    $('#loading-image').show();
    function load_data()
    {
        $.ajax({
            url:"fetch.php",
            method:"POST",
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }
    load_data();
</script>

result will have the value of $output:

<?php
include '../../variables.php';
include '../../_Database.php';
$db = Database::getInstance(); 

$minDuration;
$maxDuration;
$tableRowCounter;

$output =     '<table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Artikel</th>
              <th scope="col">Durchlaufzeit</th>
              <th scope="col">Neue Durchlaufzeit</th>
              <th scope="col">Bestätigen</th>
            </tr>
          </thead>
          <tbody>
        ';

        $result = mysqli_query($db->link, "SELECT * FROM `Person_changes_Article`");
        while ($row = mysqli_fetch_assoc($result))
        {
            $result2 = mysqli_query($db->link, "SELECT * FROM `Article`");
            while ($row2 = mysqli_fetch_assoc($result2))
            {
                if ($row['Article_idArticle'] == $row2['idArticle'])
                {
                    $minDuration = ($row2['duration'] / 10) * 9;
                    $maxDuration = ($row2['duration'] / 10) * 11;

                    if ($row['newDuration'] < $minDuration OR $row['newDuration'] > $maxDuration)
                    {   
                        $tableRowCounter++;
                        $output .=     '
                            <tr>
                            <th scope="row">'.$tableRowCounter.'</th>
                                <td>'. $db->getArticleString($row2["idArticle"]) ." - " . $row2["idArticle"]. '</td>
                                <td>'. $row2["duration"] .'</td>
                                <td>'. $row["newDuration"] .'</td>
                                <td><input type="checkbox" id="t'. $tableRowCounter .'" name="name" value="value"></td>
                            </tr>
                        ';
                    }
                }
            }  
        }

$output .= '    
    </tbody>
</table>';
echo $output;

?>

I intend to add checkboxes to each row in the table. Where a user simply can make a choice which rows should be changed and sent back to the server.

I don't know how to get the values out of the td's. I tried to assign an automatically generated id to each checkbox with $tableRowCounter.

However, when I try to access the id of let's say #t1 with jquery it doesn't work.

like so:

$(document).ready(function(){
  $('#t1').prop('checked', true);
});

After all, it just feels bad preparing auto-generated id values in the backend.

What I want to do is (or the user) to check checkboxes of any row, and hit a button which sends the values in the table of that specific row to the server. It doesn't even matter how the server is receiving the data. I'd be totally fine with an array of all the values from all rows of the table (just the checked ones though)

How? Please help.

Answer 1

First, for the third code snippet, the $('#t1') was unavailable because the table was not rendered when document was ready. The table was inserted after the AJAX request response. If you want to initialize something, do it in the AJAX request success callback.

For submitting the checked rows, attribute selector is recommended.

the html output:

$output .= '
  <tr>
    <th scope="row">'.$tableRowCounter.'</th>
    <td>'. $db->getArticleString($row2["idArticle"]) ." - " . $row2["idArticle"]. '</td>
    <td>'. $row2["duration"] .'</td>
    <td>'. $row["newDuration"] .'</td>
    <td><input type="checkbox" data-id="'. $row['id'] .'" name="name" value="value"></td>
  </tr>';

then the button handler:

$("#submit").onclick(function() {
  var selectedIds = []
  $("table input[type=checkbox]").forEach(function(i, elem) {
    var cb = $(elem)
    if (cb.prop('checked')) {
      selectedIds.push(cb.attr('data-id'))
    }
    // send selectedIds to server
  })
})