CODEWITHSUNDEEP
javascriptjquery
Flavius
Flavius

Reputation: 37

jquery how can I get data from html table row

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

Upvotes: 0

Views: 124

Answers (5)

neer
neer

Reputation: 4082

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");
}

Upvotes: 0

Yogesh K
Yogesh K

Reputation: 21

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>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

The problem is: Context.

When you use 

x = $('.hidden')

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

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.

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

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

Upvotes: 1

SamGhatak
SamGhatak

Reputation: 1493

Maybe you are looking for this:

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

x should contain all the values.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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

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

Upvotes: 1

Related Questions