CODEWITHSUNDEEP
jqueryhtml-tableattributes
Jason
Jason

Reputation: 4967

How to add an ID attribute to a table tr through jQuery

I have a table that is constructed using the WordPress Settings API. The table is outputted like this:

<tr>
    <th scope="row"><label for="feedblitz_rss_link">FeedBlitz RSS URL:</label></th>
    <td><input class="regular-text" type="text" id="feedblitz_rss_link" name="aswfe_options[feedblitz_rss_link]" value="" />
    <br />
    <span class="description">Enter the URL to your Feedblitz RSS Feed.</span></td>
</tr>

In each table row there is a form field that contains an ID. I would like to take that ID and assign it to the <tr> of the row, so that the row would look like this:

<tr id="feedblitz_rss_link">
    <th scope="row"><label for="feedblitz_rss_link">FeedBlitz RSS URL:</label></th>
    <td><input class="regular-text" type="text" id="feedblitz_rss_link" name="aswfe_options[feedblitz_rss_link]" value="" />
    <br />
    <span class="description">Enter the URL to your Feedblitz RSS Feed.</span></td>
</tr>

I want to do this so that then I can get at each table row through jQuery and hide or display each row that is needed.

== Update ==

I have the table now assigning dat-rel attributes to each table row thanks to @Mike & @Dennis using this code:

$(".aswfe-admin .form-table tr input").each(function() {
    var id = $(this).attr("id");        
    $(this).parent().parent().attr("data-rel", id);
});

Now I seem to be having issues getting at each row and hiding them. I thought I could use something like this but this code hides the whole table, whereas I only want to hide the specific row with the specific data-rel attribute.

$(".form-table tr").data("rel", "feedblitz_rss_link").hide();

Upvotes: 0

Views: 22788

Answers (3)

eapo
eapo

Reputation: 1081

You can manipulate your tr on many ways:

$('table tr:nth(0)').slideToggle();
$('table tr td').find('#feedblitz_rss_link').parent().slideToggle();
$('table tr td label').indexOf ("RSS URL") > -1
...

update: or you can use wordpress hooks

Upvotes: 0

user1823761
user1823761

Reputation:

Working jsFiddle Demo

You are hiding the row with invalid syntax. From beginning, I think that you have multiple tr, so working with ID isn't a good idea. Let get the input by the class and its hierarchy:

$('tr > th + td > .regular-text').each(function () {
    var id = $(this).attr('id');
    $(this).closest('tr').attr('data-id', id);
});

Now you want to show/hide the tr element (for example by clicking on it):

$('tr[data-id]').on('click', function () {
    $(this).hide();
});

Upvotes: 0

Mike Pugh
Mike Pugh

Reputation: 6787

$("tr input").each(function() {
    var id = $(this).attr("id");        
    $(this).parent().parent().attr("data-feed-id", id);
});

Note that this answer is tailored to the markup provided and assumes it won't conflict with other tables on your page.

You can access access the rows and inspect them later via

$("[data-feed-id]").each(function() {
     ...do stuff....
});

Starting to sound like the rows you're looking to hide are well known. You can accomplish this easily enough with (given the same markup above)

$("#some_known_id").parent().parent().hide();

See fiddle @ http://jsfiddle.net/NWU5Q/

Upvotes: 2

Related Questions