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

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;

                    }

                }

            }  

        }

$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 .= '&nbsp; <tr>&nbsp; &nbsp; <th scope="row">'.$tableRowCounter.'</th>&nbsp; &nbsp; <td>'. $db->getArticleString($row2["idArticle"]) ." - " . $row2["idArticle"]. '</td>&nbsp; &nbsp; <td>'. $row2["duration"] .'</td>&nbsp; &nbsp; <td>'. $row["newDuration"] .'</td>&nbsp; &nbsp; <td><input type="checkbox" data-id="'. $row['id'] .'" name="name" value="value"></td>&nbsp; </tr>';然后按钮处理程序：$("#submit").onclick(function() {&nbsp; var selectedIds = []&nbsp; $("table input[type=checkbox]").forEach(function(i, elem) {&nbsp; &nbsp; var cb = $(elem)&nbsp; &nbsp; if (cb.prop('checked')) {&nbsp; &nbsp; &nbsp; selectedIds.push(cb.attr('data-id'))&nbsp; &nbsp; }&nbsp; &nbsp; // send selectedIds to server&nbsp; })})

Answer 2

我无法完全将您的解决方案应用于我的问题。但是，我看到了它是如何制作的，并在我对 JavaScript 的理解水平上再次编写了它。我知道不应该这样做，但我没有看到任何原因为什么我会遇到没有唯一 ID 的问题我已经给了我的 tds ID。像这样：<tr>&nbsp;<th scope="row">'.$tableRowCounter.'</th>&nbsp; &nbsp;<td>'. $db->getArticleString($row2["idArticle"]) .'</td>&nbsp; &nbsp;<td id="article">'. $row2["idArticle"] .'</td>&nbsp; &nbsp;<td id="duration">'. $row2["duration"] .'</td>&nbsp; &nbsp;<td id="newDuration">'. $row["newDuration"] .'</td>&nbsp; &nbsp;<td>'. $db->getName($row["Person_idPerson"]) . " ".$db->getLastName($row["Person_idPerson"]) .'</td>&nbsp; &nbsp;<td id="check"><input type="checkbox" id="check" name="name" value="value"></td></tr>然后我可以轻松地遍历 tds 并将值推送到数组中：&nbsp; &nbsp; var article = [];&nbsp; &nbsp; var duration = [];&nbsp; &nbsp; var newDuration = [];&nbsp; &nbsp; var check = [];&nbsp; &nbsp; $("td[id='article']").each(function(){&nbsp; &nbsp; &nbsp; &nbsp; article.push($(this).text());&nbsp; &nbsp; })&nbsp; &nbsp; $("td[id='duration']").each(function(){&nbsp; &nbsp; &nbsp; &nbsp; duration.push($(this).text());&nbsp; &nbsp; })&nbsp; &nbsp; $("td[id='newDuration']").each(function(){&nbsp; &nbsp; &nbsp; &nbsp; newDuration.push($(this).text());&nbsp; &nbsp; })&nbsp; &nbsp; $("input[id='check']").each(function(){&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).is(':checked')){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; check.push(1);&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; check.push(0);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; })并使用 Ajax 发布数组$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; &nbsp; url:'storeData.php',&nbsp; &nbsp; &nbsp; &nbsp; data: { article: article,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: duration,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newDuration: newDuration,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; check: check&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //alert(data)&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; });在 storeData.php 中，我可以使用这些数组并做任何我想做的事$article = $_POST['article'];$duration = $_POST['duration'];$newDuration = $_POST['newDuration'];$check = $_POST['check'];print_r($article);print_r($duration);print_r($newDuration);print_r($check);