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

Question

我有我的index.php，我将在其中向服务器发出Ajax请求并显示响应(作为表格)。

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

结果将具有 $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;

?>

我打算向表中的每一行添加复选框。用户只需选择应更改哪些行并将其发送回服务器。

我不知道如何从 td 中获取值。我尝试使用 $tableRowCounter 为每个复选框分配一个自动生成的 id。

但是，当我尝试使用 jquery 访问 #t1 的 id 时，它不起作用。

像这样:

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

毕竟，在后端准备自动生成的 id 值感觉很糟糕。

我想要做的是(或用户)检查任何行的复选框，然后单击一个按钮，将该特定行的表中的值发送到服务器。服务器如何接收数据甚至并不重要。我完全可以接受表中所有行的所有值的数组(尽管只是选中的值)

如何？请帮忙。

Answer 1

首先，对于第三个代码片段，$('#t1') 不可用，因为文档准备好时未呈现表格。该表是在 AJAX 请求响应之后插入的。如果您想初始化某些内容，请在 AJAX 请求 success 回调中执行。

要提交选中的行，建议使用属性选择器。

html 输出:

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

然后是按钮处理程序:

$("#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
  })
})