jquery如何从html表行获取数据

I have the following table:

我有下表:

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

I need the value for every hidden field but I only get the first :

我需要每个隐藏字段的值,但我只得到第一个:

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

How can I get the different values after every click on delete button

每次单击“删除”按钮后,如何获取不同的值

5 个解决方案

#1

Simplest solution is pass the ID as parameter to deleteDataTable() function.

最简单的解决方案是将ID作为参数传递给deleteDataTable()函数。

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

#2

The problem is: Context.

问题是:上下文。

When you use

当你使用

x = $('.hidden')

you get all elements with class 'hidden'. .val() then gets the value from the first.

你得到所有“隐藏”类的元素。 .val()然后从第一个获取值。

You need to limit the hidden input to the one on the same row as the delete button.

您需要将隐藏输入限制为与删除按钮在同一行上的输入。

Unfortunately, your current hidden is not actually inside the table and you have this:

不幸的是,你当前隐藏的内容实际上并不在桌面内,你有这个:

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

You need to change your markup to:

您需要将标记更改为:

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

or similar so that the input is inside a td.

或类似的,以便输入在td内。

You can then use relative elements on the delete click:

然后,您可以在删除单击上使用相关元素:

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

or, using the amended html above, use .next but I would keep the above

或者,使用上面修改过的html,使用.next,但我会保留上述内容

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

#3

Maybe you are looking for this:

也许你正在寻找这个:

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

x should contain all the values.

x应包含所有值。

#4

You can simply use this:

你可以简单地使用这个:

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

#5

You can like that

你可以这样

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

Script

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