Use Jquery Instead of Functions to Access Data From Table

Question

Forever, we have been using javascript functions to pass data from a table to whatever we need to do with that row of data. For example, take this table:

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jack</td>
            <td><a href="javascript:myfunc(1,'Jack')">edit</a></td>
        </tr>
        <tr>
            <td>Dan</td>
            <td><a href="javascript:myfunc(2, 'Dan')">edit</a></td>
        </tr>
        <tr>
            <td>Mark</td>
            <td><a href="javascript:myfunc(3, 'Mark')">edit</a></td>
        </tr>
    </tbody>
</table>

Normally, we would just have the following function to do something with the data that changes by row (typically passing an id, but sometimes there could be a bunch of args in the function). This function could do a variety for things - not just these examples of course.

function myfunc(f_ID, f_Name) {
   alert(f_ID + "_" + f_Name);
   $.colorbox({ iframe: true, overlayClose: true, opacity: .70, inline: false, fixed: true, title: "Colorbox Title", href: "/mypage.asp?id=" + f_ID + "&name=" + f_Name });
}

OR

function myfunc(f_ID, f_Name) {
   if (confirm("Are you sure that you would like to permanently delete id # " + f_ID + " for " + f_Name + "?")) {
      window.location = "/mypage.asp?id=" + f_ID + "&name=" + f_Name
   }
}

I know that it's probably not the best to mix Jquery and old school JS like this (maybe it's fine??), so there must be a better way to access this data.

I was thinking that I could use "data-" tags, but the issue is how do you actually get the value when there are multiple rows? I cannot use an ID since it's unique and if I added a class, how do I access the data from the call?

Any help would be greatly appreciated, thank you!

UPDATE

This worked as the answer for my sitaution. Thanks @Quentin!

<a class="testlink" href="#" data-id="1234">edit</a>

$("a.testlink").on("click", myAction);
function myAction(event) {
   event.preventDefault();
   alert($(this).data("id"));
}

As per my knowledge the best way would be to use the .closest(). The below link has defined what you need. http://stackoverflow.com/questions/14460421/jquery-get-the-contents-of-a-table-row-with-a-button-click — LearningPhase, Apr 11 '16 at 13:39

score 1 · Accepted Answer · answered Apr 11 '16 at 13:39

1

First: Work out what you want to happen if the JS isn't available.

An ordinary link will do.

<a href="/mypage.asp?id=1&amp;name=Jack">edit</a>

You don't need the id and the name separately in your code, you only used them in the URL, which appears in the page itself, and you can read the URL from the link directly.

this (in an event handler) refers to the element that was used to trigger the event.

jQuery(function() {

    $("a").on("click", openColorBox);

    function openColorBox(event) {
        event.preventDefault();
        var url = this.href;
        $.colorbox({ 
            iframe: true, 
            overlayClose: true, 
            opacity: .70, 
            inline: false, 
            fixed: true, 
            title: "Colorbox Title", 
            href: url 
        });
    }

});

If you really needed to pass additional data, then you could read it from data attributes via:

<a href="/mypage.asp?id=1&amp;name=Jack" data-somedata="foo">edit</a>

…
function openColorBox(event) {
    event.preventDefault();
    alert( jQuery(this).data("somedata") );

… but traversing the DOM …

var name = jQuery(this).parents("tr").find("td:first-child").text();

… or using attributes designed for the specific data you are using (if they exist) would be better.

answered Apr 11 '16 at 13:39

Quentin

914,110
126
1,211
1,335

This would work for colorbox - thanks for posting. What about if Colorbox was not in the picture? Maybe I just want to navigate to a page (see added example above) or process something on the page? How can you access "data-somedata" when you have maybe 250 rows of data? How do you know which "edit" button or link in which row was clicked? Ex: data-id="1", data-id="2", etc – Dennis Apr 11 '16 at 13:48
If you "use want to navigate to a page" then use a link. – Quentin Apr 11 '16 at 13:51
"process something on the page" — Too vague to say – Quentin Apr 11 '16 at 13:51
Also, this will not work since I am not always accessing data that is in the actual table itself. var name = jQuery(this).parents("tr").find("td:first-child").text(); Assume this is data specific to a row that is never displayed. – Dennis Apr 11 '16 at 13:52
'How can you access "data-somedata"' — See the example in the answer starting "If you really needed to pass additional data, then you could read it from data attributes" – Quentin Apr 11 '16 at 13:52
"when you have maybe 250 rows of data? do you know which "edit" button or link in which row was clicked?" — As I said: this (in an event handler) refers to the element that was used to trigger the event. – Quentin Apr 11 '16 at 13:52
"Also, this will not work since I am not always accessing data that is in the actual table itself." — Then you use other selectors. Traversing the DOM is traversing the DOM, I just gave an example using the data you provided in the question. – Quentin Apr 11 '16 at 13:53
Ok, I got it. This is working for me. Thanks for posting this reply. QUESTION - it's not the right way to simply use an inline function call as I was doing right? Or is that a legit way to do this as well? – Dennis Apr 11 '16 at 13:57
Depends on your definition of legit. It is definitely not best practise. – Quentin Apr 11 '16 at 13:58

Use Jquery Instead of Functions to Access Data From Table

1 Answers1