How to extract a td value from a jquery populated table

Question

I have a jquery generated table and on click I want to extract the value from the clicked td. I am able to do this with an html generated table but not a jquery generated one. Help and here is my code:

$(function() {
$('#searchpartno').keyup(function() {
    var item = $(this).val();

    $.ajax({
        "url": "/searchpartno",
        "data": {"partnumber":item},
        "type": "get",
        "dataType": "json",
        "success": function(items) {
            $('#partnumber_tbody').empty();
            var clearHTML = '<tr>' +'<td></td>' +'</tr>';
            var trHTML = '';
            $.each(items, function (i, item) {
                trHTML += '<tr>' +'<td onclick="updatePartNo()" class="cleardata">' + item.name + '</td>' +'</tr>';
            });
            $('#partnumber_tbody').append(clearHTML);
            $('#partnumber_tbody').append(trHTML);
                },
                "error": function() {
                    $('#dailysale_price').val('');
        }
    });
})
})

function updatePartNo() {
    alert ($(this).html());
}

on click it says undefined. Help

Use the `$("#YourTable").on("click", "td", function(){ .... })` — Greggz, Dec 28 '17 at 19:10
Greggz, your solution works on the first click only. on the second click and more it alerts more than once for the same td. — John Milo, Dec 28 '17 at 19:27
That doesn't sound right, there must be some external behaviour causing that atypical response — Greggz, Dec 28 '17 at 19:33
Ya, the number of alerts are based on the td's. in my list are 5 so it alerts 5 times. — John Milo, Dec 28 '17 at 19:36
Try `updatePartNo(this)`. Assuming you didn't mess up the scope, it should be correct your code — Greggz, Dec 28 '17 at 19:46
Same results. However, I tried console.log and i've noted its multiplying and creating more td's on every click. — John Milo, Dec 28 '17 at 19:56
You changed the signature aswell right ? I don't think your problem is in the onclick — Greggz, Dec 28 '17 at 20:05

score 0 · Accepted Answer · answered Dec 28 '17 at 19:50

0

it says undefined

Because this in function updatePartNo refers to window object, not to <td>. To solve this, you have to pass the correct object to the function.

<td onclick="updatePartNo(this)" note (this).

Then your function will be like

function updatePartNo(element) {
    alert ($(element).html());
}

BTW, the autocomplete implementation you're building is not very good. You're sending AJAX request on every keyup. It creates unnecessary load on your server. There is absolutely no need to receive matches from the server on every keyup. Sorry for the offtopic.

answered Dec 28 '17 at 19:50

Kosh

16,966
2
19
34

Kosh, your solution works. However, I don't see any relationship between updatePartNo(this) and updatePartNo(element). Can you clarify please? And yes am using keyup because this is a search input. How would you do it? – John Milo Dec 28 '17 at 20:27
`onclick` attribute creates click event handler on the element which calls function updatePartNo with argument `this`. In this context `this` refers to the clicked element. In the function declaration `function updatePartNo(element) { alert ($(element).html()); }` "element" is just a name of the passed argument. Hope it helps. – Kosh Dec 28 '17 at 21:25
@John, regarding the implementation itself, I'd suggest receiving the matches list from the server only when it's necessary. Imagine, you typed 'a' and received a list: 'anna, asia, ban, bass ...' Then you typed 's' -- you don't need to get a new list, you can use the list you've already got. Just hide the elements which don't match. So you'll need a new list only when your input has changed significantly (say you've removed 'a' and 's' has left alone). Try to think this way. – Kosh Dec 28 '17 at 22:02
your implementation is very good. I'll research on this one. Or do you have recommended materials I would read? – John Milo Dec 29 '17 at 10:53

How to extract a td value from a jquery populated table

1 Answers1