CODEWITHSUNDEEP
javascripthtmlcssattributeshtmlelements
robert
robert

Reputation: 625

javascript - get custom attribute based on an id

How can I find the seq number given the id in this example?

<table>
<tr class="row_header thin_border"> 
    </tr><tr id="id33192010101533333"  seq="2">
    <td>20101015</td>
    <td>600</td>
    <td>730</td>        
    <td><a href="#" onclick="deleteActivity(3319,20101015,1);">Click</a></td>
    <td><a href="#" onclick='selectEditActivity("id3319201010153333");'>Click</a></td>
    </tr>

    <tr id="id3319201010151111"  seq="3">
    <td>20101015</td>
    <td>600</td>
    <td>730</td>        
    <td><a href="#" onclick="deleteActivity(3319,20101015,1);"> <img src="/bbhtml/img/deleteAction.png"></a></td>
    <td><a href="#" onclick='selectEditActivity("id3319201010151111");'><img src="/bbhtml/img/editAction.png"></a></td>
    </tr>
<table>


<script>
    function selectEditActivity(pass_id){
        alert("seq# =:" + ???)
    }
</script>

Upvotes: 24

Views: 66697

Answers (4)

John Slegers
John Slegers

Reputation: 47101

How to get an attribute based on an id

With jQuery :

var seq = $('#id33192010101533333').attr("seq");

Without jQuery :

vvar seq = document.getElementById("id3319201010151111").getAttribute("seq");

You can try both of them at this Fiddle.

Both options should work in any browser!

What you really want

First of all, it's better to name your custom attribute data-seq instead of seq. The HTML5 standard allows custom elements but only considers them valid when their name starts with data-.

Also, it's not a good idea to put your click handlers directly in your CSS. It's better to use the class property or some custom data-action property with a value like edit or delete and then attach an event handler when you finish loading your page. Then, look at the first ancestor that has a data-seq property and get that property.

As one demo says more than a thousand words, here's a demo :

var list = document.querySelectorAll('[data-action="delete"]');
for (var i = 0; i < list.length; ++i) {
    list[i].addEventListener("click", function(e){
        alert('delete ' + e.target.closest('[data-seq]').getAttribute('data-seq'));
    });
}

var list = document.querySelectorAll('[data-action="edit"]');
for (var i = 0; i < list.length; ++i) {
    list[i].addEventListener("click", function(e){
        alert('edit ' + e.target.closest('[data-seq]').getAttribute('data-seq'));
    });
}
table, td {
    border : 1px solid #333;
}

td {
    padding : 10px;
}
<table>
    <tr class="row_header thin_border"></tr>
    <tr id="id33192010101533333" data-seq="2">
        <td>20101015</td>
        <td>600</td>
        <td>730</td>        
        <td><a href="#" data-action="delete">Click</a></td>
        <td><a href="#" data-action='edit'>Click</a></td>
    </tr>
    <tr id="id3319201010151111" data-seq="3">
        <td>20101015</td>
        <td>600</td>
        <td>730</td>        
        <td><a href="#" data-action="delete"> <img src="https://i.sstatic.net/mRsBv.png?s=64&g=1"></a></td>
        <td><a href="#" data-action='edit'><img src="https://i.sstatic.net/mRsBv.png?s=64&g=1"></a></td>
    </tr>
<table>

Or, if you prefer the jQuery way, you can replace the JavaScript code with the following (much simpler) code :

$('[data-action="delete"]').click(function(e){
    alert('delete ' + $(this).closest('[data-seq]').data('seq'));
});

$('[data-action="edit"]').click(function(e){
    alert('edit ' + $(this).closest('[data-seq]').data('seq'));
});

See also this Fiddle and this Fiddle for the same demo on JSFiddle, respectively without and with jQuery.

Upvotes: 10

zod
zod

Reputation: 12437

try this

var id = document.getElementById("divId").getAttribute("attributeId");

Upvotes: 62

Ivo Wetzel
Ivo Wetzel

Reputation: 46745

Retrieve the DOM element and then get the seq attribute: 

document.getElementById(id).getAttribute('seq'); // note: this will return a string, and getElementById might return null in case there is no element with the given id.

Upvotes: 8

epascarello
epascarello

Reputation: 207521

You want to use objRef.getAttribute('seq') or plan old dot notation objRef.seq

Upvotes: 1

Related Questions