jQuery如何從html表行獲取數據

Question

我有下表：

   <table cellspacing="0" cellpadding="0" id="product">
        <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Price</th>
            <th colspan="2">Nr products</th>
        </tr>
        <?php foreach ($productsInStock as $product) : ?>
            <tr>
                <td><?php echo $product->getName(); ?></td>
                <td><?php echo $product->getCategory(); ?></td>
                <td><?php echo $product->getPrice().ProductController::coin; ?></td>
                <td><?php echo $product->getNrProducts(); ?></td>
                <td><button type="submit" value="Delete" class="upload" onclick="deleteDataTable();">Delete</button></td>
                <input type="hidden" name="hiddenfieldname" class="hidden" value="<?php echo $product->getId();?>">
            </tr>
        <?php endforeach; ?>
    </table>

我需要每個隱藏字段的值，但只有第一個：

x = ('.hidden').val() // gives the first value

每次單擊刪除按鈕后如何獲得不同的值

Answer 1

最簡單的解決方案是將ID作為參數傳遞給deleteDataTable()函數。

<td><button type="submit" value="Delete" class="upload" onclick="deleteDataTable(<?php echo $product->getId();?>);">Delete</button></td>

Answer 2

問題是：上下文。

使用時

x = $('.hidden')

您將獲得所有類別為“隱藏”的元素。 .val()然后從第一個獲取值。

您需要將隱藏輸入限制為與刪除按鈕在同一行上的輸入。

不幸的是，您當前隱藏的內容實際上不在表內，並且您有：

<table><tr>...</tr><tr>..</tr>
<input type="hidden"...>
<input type="hidden"...>

您需要將標記更改為：

<tr>
    <td><?php echo $product->getName(); ?></td>
    <td><?php echo $product->getCategory(); ?></td>
    <td><?php echo $product->getPrice().ProductController::coin; ?></td>
    <td><?php echo $product->getNrProducts(); ?></td>
    <td>
        <button type="submit" value="Delete" class="upload" onclick="deleteDataTable();">Delete</button>
        <input type="hidden" name="hiddenfieldname" class="hidden" value="<?php echo $product->getId();?>">
    </td>
</tr>

或類似名稱，以便輸入在 td 。

然后，可以在刪除單擊上使用相關元素：

function deleteDataTable()
{
    var x = $(this).closest("tr").find(".hidden").val();
}

或者，使用上面修改的html，使用.next但我會保留上面的內容

    var x = $(this).next(".hidden").val();

Answer 3

也許您正在尋找：

var x=[];
$('.hidden').each(function(){
    x.push($(this).val());
});

x應該包含所有值。

Answer 4

你可以這樣

  <table cellspacing="0" cellpadding="0" id="product">
    <tr>
        <th>Name</th>
        <th>Category</th>
        <th>Price</th>
        <th colspan="2">Nr products</th>
    </tr>
    <?php foreach ($productsInStock as $product) : ?>
        <tr data-productid="<?php echo $product->getId();?>">
            <td><?php echo $product->getName(); ?></td>
            <td><?php echo $product->getCategory(); ?></td>
            <td><?php echo $product->getPrice().ProductController::coin; ?></td>
            <td><?php echo $product->getNrProducts(); ?></td>
            <td><button type="submit" value="Delete" class="upload" onclick="deleteDataTable();">Delete</button></td>
        </tr>
    <?php endforeach; ?>
</table>

腳本

function deleteDataTable()
{
    var productIdOfCurrentTR = $(this).closest("tr").data("productid");
}

Answer 5

您可以簡單地使用：

<tr>
    <td><?php echo $product->getName(); ?></td>
    <td><?php echo $product->getCategory(); ?></td>
    <td><?php echo $product->getPrice().ProductController::coin; ?></td>
    <td><?php echo $product->getNrProducts(); ?></td>
    <td>
        <button type="submit" value="Delete" class="upload getValue" data-product-id="<?php echo $product->getId();?>">Delete</button>
    </td>
</tr>

<script>
$('.getValue').click(function(){
    var val = $(this).data('product-id');
});
</script>