get data from the row using a boot on the same row

Andrels

I have a table with a button on each row to delete the item I don't want, and I need to store the ID of the item which is in the ID column.
But in the tests I did, it only takes the ID of the first line, it doesn't matter which line I click on

my table code HTML

<table class="table table-bordered">
        <thead>
            <tr>
                <td>ID</td>
                <td>Nome</td>
                <td>Modelo</td>
                <td>Numero Serial</td>
                <td>Quantidade</td>
                <td>Preco</td>
                <td>Sub Total</td>
                <td>Excluir</td>
            </tr>
        </thead>

        <tbody id="listaProdutos"></tbody>
    </table>

i add the lines with js

var produto = "<tr>" +
            "<td>" + idProduto + "</td>" +
            "<td>" + Nome + "</td>" +
            "<td>" + Modelo + "</td>" +
            "<td>" + SN + "</td>" +
            "<td>" + Quantidade + "</td>" +
            "<td> R$ " + PrecoVenda + "</td>" +
            "<td> R$ " + total + "</td>" +
            "<td><button type='button' class='btn btn - block btn - primary' id='excluiritem'>Excluir</button></td>"
            "</tr>";

        listaProdutos.innerHTML += produto;

Can someone help me?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Andrels

link to a test case:
http://live.datatables.net/popibizu/1/edit

Andrels

Can someone help me?

kthorngren

My suggestion is to use delegated events like this example.

Kevin

allan

Do what Kevin says, but I think it would be worth breaking down your example so you understand why it doesn't work.

First of all you have id="ID" for lots of rows on the page. That is not valid HTML. An id must be unique.

Next, when you use id=anything the value you give the id property becomes a global variable for that DOM element.

So when you do:

onclick="passID(ID)"

That would be the same as:

onclick=passID( document.getElementById('ID' )

And since you have lots of elements which match, and only one can, the browser picks the first one. Hence the issue you are having.

Thinking about it, I reckon this would make a good interview question for Javascript developers . Explain this to me...

So the upshot of all this is what I recommend for all events. Do not use DOM0 events (i.e. onclick, on*) - use Javascript attached events. In this case, since we have jQuery on the page, use its event system and specifically delegated events.

Allan