开发者

javascript - get custom attribute based on an id

开发者 https://www.devze.com 2023-01-20 07:19 出处:网络
How can I find the seq number given the id in this example? <table> <tr class=\"row_header thin_border\">

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='s开发者_运维技巧electEditActivity("id3319201010151111");'><img src="/bbhtml/img/editAction.png"></a></td>
    </tr>
<table>


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


try this

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


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.


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号