Question

我的HTML列表与链接到Ajax脚本的按钮只在第一行接收。 PHP页面

<?php
$sql="SELECT * FROM scanns WHERE `site` = '$csite' AND `date` BETWEEN '$sdate' AND '$edate' ";
$result_set=mysqli_query($link,$sql);
while($row=mysqli_fetch_array($result_set))
{
?>
    <tr>
    <td><?php echo $row['date']; ?></td>
    <td><?php echo $row['site']; ?></td>
    <td><?php echo $row['file_name']; ?></td>
    <td><a href="scann/<?php echo $row['site']?>/<?php echo $row['file_name'] ?>" target="_blank">view scann</a></td>
    <td>
        <input class='date' type='hidden' value= "<?php echo $row['date']; ?>"/>
        <input class='site' type='hidden' value= "<?php echo $row['site']; ?>"/>
        <input class='filename' type='hidden' value= "<?php echo $row['file_name']; ?>"/>
        <input class="submit"  type="button" value="Delete Scan">
    </td>
    <td>
        <input class="stamp"  type="button" value="Post File">
    </td>
    </tr>
<?php
}
?>
      </table>

Ajax调用

$(document).ready(function(){
    "use strict";
    $('.submit').click(function(){ 
        var date = $('.date').val();
        var site = $('.site').val();
        var filename = $('.filename').val();
        var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;

         // AJAX Code To Submit Form.
         $.ajax({
             type: "POST",
             url: "cscanndelete.php",
             data: dataString,
             cache: false,
             success: function(result){
                 alert(result);
             }
        });
        return false;
    });
    $('.stamp').click(function(){
        var date = $('.date').val();
        var site = $('.site').val();
        var filename = $('.filename').val();
        var dataString = 'date='+ date + '&site='+ site + '&filename='+ filename;

        // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "scanstamp.php",
            data: dataString,
            cache: false,
            success: function(result){
                alert(result);
            }
        });

        return false;
    });
});

如果你点击任何一个按钮，它只会拾取第一行的值，不知道如何修复，或者即使我可以。

Answer 1

$('.date').val()将返回第一个匹配元素的值。由于页面上有许多匹配元素，因此它总是返回第一个表格行。

您处于$('.submit')选择器的上下文中，因此您可以将其用作遍历DOM的起点并找到所需的特定元素。像这样：

var date = $(this).closest('tr').find('.date').val();

应该从this（提交按钮）开始，检查包含tr（包含您在这种情况下需要查找的所有元素），然后查找恰好在该上下文中的匹配元素。只要该父.date中只有一个tr元素，它就会从该元素中返回该值。

在您的情况下，您也可以使用.prev('.date')之类的内容，或者只遍历td而不是tr等。有很多方法可以使用关于它，取决于如果标记略有变化可能需要的强大程度。

Answer 2

$('.date').val()

将始终返回第一个匹配元素的值。如果你想获得被点击元素的值，你可以这样做：

$('submit').click(function(){
  $(this).closest('input').find('.date').val();
  $(this).closest('input').find('.site').val();

...}）;

Ajax .click从列表中只获取第一行值

2 个答案: