javascript - 根据ID获取自定义属性

rob*_*ert 13 javascript attributes

如何在此示例中找到给定id的seq编号?

<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>
Run Code Online (Sandbox Code Playgroud)

zod*_*zod 42

试试这个

var id = document.getElementById("divId").getAttribute("attributeId");
Run Code Online (Sandbox Code Playgroud)

  • 可能会添加您现在可以使用"data-seq"作为HTML 5中的有效自定义属性 (3认同)

Ivo*_*zel 8

检索DOM元素,然后获取seq属性:

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.
Run Code Online (Sandbox Code Playgroud)


Joh*_*ers 5

如何基于ID获取属性

使用jQuery:

var seq = $('#id33192010101533333').attr("seq");
Run Code Online (Sandbox Code Playgroud)

没有jQuery:

vvar seq = document.getElementById("id3319201010151111").getAttribute("seq");
Run Code Online (Sandbox Code Playgroud)

您可以在此Fiddle中尝试它们两个。

这两个选项都可以在任何浏览器中使用


你真正想要的

首先,最好将您的自定义属性命名data-seqseq。HTML5标准允许自定义元素,但仅当其名称以开头时才认为它们有效data-

另外,将点击处理程序直接放在CSS中也不是一个好主意。最好在使用class属性或某些自定义data-action属性时使用诸如editor 的值delete,然后在完成页面加载时附加事件处理程序。然后,查看具有data-seq属性的第一个祖先并获得该属性。

正如一个演示说了一千多个单词一样,这是一个演示:

var seq = $('#id33192010101533333').attr("seq");
Run Code Online (Sandbox Code Playgroud)
vvar seq = document.getElementById("id3319201010151111").getAttribute("seq");
Run Code Online (Sandbox Code Playgroud)
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'));
    });
}
Run Code Online (Sandbox Code Playgroud)

或者,如果您喜欢jQuery方式,则可以将JavaScript代码替换为以下(更简单)的代码:

$('[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'));
});
Run Code Online (Sandbox Code Playgroud)

关于JSFiddle上的相同演示,另请参见this Fiddlethis Fiddle,分别在不使用jQuery和使用jQuery的情况下。