javascript - 从 HTML 表中检索特定行值并将其提交给 PHP

Question

我正在从数据库填充一个表，它看起来像这样:

<form name = "Form" role="form" action ="php/teilnehmen.php" method="POST">
    <fieldset>
                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Studienfach</th>
                                    <th>Teilnehmer/in</th>
                                    <th>Teilnehmen</th>
                                </tr>
                            </thead>
                            <tbody>
//<?php php code..... 
$i =0;
$sizeofstudienfaecherseperate = 
count($studienfaecherseperate);
for ($i; $i < $sizeofstudienfaecherseperate; $i++) {

?>
                                        <tr class="odd gradeX">
                                    <td ><?php echo($i+1);?></td>
        <td class="studienfach"><?php echo($studienfaecherseperate[$i]);?>
 <input   type="hidden" name="PARAM_STUDIENFACH" id="PARAM_STUDIENFACH" 
 value="<?php echo($studienfaecherseperate[$i]);?>"> </input>
        </td>
                                    <td ><?php echo($teilnehmer[$i]);?></td>
                                    <td width="10%">
         <?php if ($teilnahmestatus[$i] =="0"){ ?>
 <button type="submit" class="btn btn-success use-address" 
 name="teilnehmern"id="teilnehmen">Teilnehmen</button>
 <?php }else{?>
 <button type="submit" class="btn btn-danger use-address" name="teilnahme-beenden" 
 id="teilnahme-beenden">Teilnahme beenden</button>
 <?php }?>
                                    </td>
                                </tr>
                                <?php } ?>
                        </tbody>
                        </table>
      </fieldset>                  <!-- /.table-responsive -->

表格显示得很好，我的问题是当我尝试将特定行的第二列值“PARAM_STUDIENFACH”提交到我的php web服务时。它总是给我返回最后的值。我知道这一点，因为我在每一行中使用相同的id，所以它会被覆盖。我尝试使用 JavaScript 返回论坛中其他问题中单击的行的值，但它对我不起作用。如果有帮助的话，我正在使用引导表。

编辑 1:

感谢@Taplar 的回答，我设法找到了问题的解决方案。我使用 JavaScript 来检索数据并使用 ajax 来发送 post 请求。这是我使用的代码:

$(".use-address").click(function() {

var item = $(this).closest("tr")   // Finds the closest row <tr> 
                   .find(".studienfach")     // Gets a descendent with class="nr"
                   .text();         // Retrieves the text within <td>
$.ajax({
        type: "POST",
        dataType: "json",
        url: "php/teilnehmen.php",
        data: {PARAM_STUDIENFACH:item},
        success: function(data){
            alert(item);
        },
        error: function(e){
            console.log(e.message);
        }
});

});

我现在的问题是在警报中“项目”显示正确，但在我的数据库中它被保存为以下示例:

item = a(显示在警报 a 中)

item = a\n(就像数据库中一样保存，\n后面有空格)

我尝试在发送之前 trim 该项目，但得到了相同的结果

为了获取ajax发送的项目，我在以下位置使用这行代码:

$studienfach = null;

if(isset($_POST['PARAM_STUDIENFACH']))
    $studienfach = $mysqli->real_escape_string($_POST['PARAM_STUDIENFACH']);

编辑2:

我通过这样做成功解决了我的第二个问题:

$pos= strpos($studienfach, "\\");
$studienfachtemp = substr($studienfach, 0,$pos);
trim($studienfachtemp);

如果有更优雅或更正确的方法来做到这一点!请发布!谢谢大家。

Answer 1

<elem1>
    <elem2 class="getMe"></elem2>
    <elem3></elem3>
</elem1>

快速上下文查找引用。假设您的页面上的所有“elem3”上都绑定(bind)了一个点击事件。当您单击它时，您想要获取关联的“elem2”，而不是全部。通过该类，您可以通过执行以下操作来根据上下文查找该元素...

//'this' being the elem3 that was clicked
$(this).closest('elem1').find('.getMe');

从您单击的元素中，它将找到“elem2”和“elem3”的共享“elem1”父级，然后仅查找属于该父级的“.getMe”。

更多阅读 Material :http://learn.jquery.com/using-jquery-core/working-with-selections/