How to get the value of a particular row's cell

Question

I've been trying to figure this out, and have been having a lot of trouble so I'd appreciate the help. This is the situation. I have a dynamically generated table, and for example, lets say that there are ten rows in this dynamically generated table from data obtained from a database. I'm using this code to get the data from the database using JSON.

$(document).ready(function() {
    $("#findtrucker-btn").click(function(event){
        $.getJSON("/getallLoadsA", function(loads) {
            var tr = loads;
            for (var i = 0; i < loads.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + i + "</td>");
                tr.append("<td>" + loads[i].loadname + "</td>");
                tr.append("<td>" + loads[i].category + "</td>");
                tr.append("<td>" + loads[i].space + "</td>");
                tr.append("<td>" + loads[i].weight + "</td>");
                tr.append("<td>" + loads[i].loadprice + "</td>");
                tr.append("<td>" + loads[i].street + " " + loads[i].city + ", " + loads[i].state + "</td>");
                tr.append("<td>" + loads[i].dstreet + " " + loads[i].dcity + ", " + loads[i].dstate + "</td>");
                tr.append("<td>" + loads[i].status + "</td>");
                tr.append("<td><button onclick=update()>Update</button></td>");
                $('#table').append(tr);
            }
        });
    });
});

So, I have 10 rows in my table, and each row has a button with name "update" that when clicked, I want to go to a different page. I've found that using the following will get me the desired output and page load, but only for row 1.

window.location.href = '/updateload?loadname='+(document.getElementById("table").rows[1].cells.item(1).innerHTML);

I want to be able to, from clicking the button "update" on each row, access that particular row's 2nd value so that loadname='that particular row's loadname' or loads[i].loadname where i = the row I'm currently on for that particular button and switch pages appropriately where upon switching pages, I will be able to get data for that row and be able to update data subsequently. Also, data is being appended to this table:

<table id="table" class="table table-bordered table-striped">
    <tr>
        <th>#</th>
        <th>Loadname</th>
        <th>Category</th>
        <th>Space</th>
        <th>Weight</th>
        <th>Load Price</th>
        <th>Pickup Location</th>
        <th>Deliver Location</th>
        <th>Status</th>
        <th>Update</th>
    </tr>
</table>

Can you please provide a rendered HTML code rather than the PHP? — Ahs N, Oct 26 '16 at 06:20
You're very close. Notice that the variable `i` is closely correlated with the row that contains both the button and the Loadname. If you could somehow pass `i+1` to the function... — Nate, Oct 26 '16 at 06:22
check http://stackoverflow.com/questions/14460421/jquery-get-the-contents-of-a-table-row-with-a-button-click — HudsonPH, Oct 26 '16 at 06:22

score 1 · Answer 1 · answered Oct 26 '16 at 06:28

Try this Approach

$(document).ready(function() {
$("#findtrucker-btn").click(function(event){
    $.getJSON("/getallLoadsA", function(loads) {
        var tr = loads;
        for (var i = 0; i < loads.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + i + "</td>");
            tr.append("<td id="'loadName' + i">" + loads[i].loadname + "</td>");
            tr.append("<td>" + loads[i].category + "</td>");
            tr.append("<td>" + loads[i].space + "</td>");
            tr.append("<td>" + loads[i].weight + "</td>");
            tr.append("<td>" + loads[i].loadprice + "</td>");
            tr.append("<td>" + loads[i].street + " " + loads[i].city + ", " + loads[i].state + "</td>");
            tr.append("<td>" + loads[i].dstreet + " " + loads[i].dcity + ", " + loads[i].dstate + "</td>");
            tr.append("<td>" + loads[i].status + "</td>");
            tr.append("<td><button onclick=update('i')>Update</button></td>");
            $('#table').append(tr);
        }
    });
});

});

and Here in Update function
   window.location.href = '/updateload?loadname=' + $("#loadname" + i).text());

score 0 · Answer 2 · answered Oct 26 '16 at 06:28

0

When you are creating dynamic html of table td try this

tr.append("<td id=rowcol_"+ i +">" + i + "</td>");

and also bind this for your update button like

tr.append("<td><button onclick=update("+ i +")>Update</button></td>");

And now on update method do this

function update(i) {
     window.location.href = '/updateload?loadname='+(document.getElementById("rowcol_" + i).innerHTML);
}

answered Oct 26 '16 at 06:28

danish farhaj

1,316
10
20

Hey thanks a lot, I changed the first line to: tr.append("" + loads[i].loadname + ""); where i became loads[i].loadname, but it worked, and I really appreciate the help! – Allison Schambers Oct 26 '16 at 06:52

How to get the value of a particular row's cell

2 Answers2