javascript - get custom attribute based on an id

Question

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> 

Answer 1

try this

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

Answer 2

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.stack.imgur.com/mRsBv.png?s=64&g=1"></a></td>          <td><a href="#" data-action='edit'><img src="https://i.stack.imgur.com/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.