Question

我有一个包含HTML5文档类型的页面，并且我尝试在表格的<tr>元素中使用数据属性，如下所示：

while($res = mysql_fetch_assoc($U)){
    if($c == "table-row-dark"){
        $c = "table-row-light";
    }else{
        $c = "table-row-dark";
    }
    echo "<tr data-id='".$res['rid']."' class='".$c."'>"
    ."<td>".$res['fname']." ".$res['lname']."</td>"
    ."<td>".$res['company']."</td>"
    ."<td>".$res['rcity'].", ".$res['rstate']."</td>"
    ."<td>".$res['rphone']."</td>"
    ."</tr>";
}

以下是我的Javascript，它为每行添加了一个onclick监听器，然后提醒data-id属性的值。

function addEvt(elem,eventType,handler){
    if (elem.addEventListener){
        elem.addEventListener (eventType,handler,false);
     }
    else if (elem.attachEvent){
        elem.attachEvent ('on'+eventType,handler); 
    }
}

if(getElm('kickbacktbl')){
    var kbRows = getElm('kickbacktbl').getElementsByTagName('tr');
    var kbrcount = kbRows.length;
    while(kbrcount--){
        if(kbRows[kbrcount]){
            var row = kbRows[kbrcount];
            addEvt(row,"click",function(e){
                cancelDefaultAction(e ? e:window.event);
                var did = row.getAttribute('data-id');
                var url = "kickback.php?id="+did;
                window.alert(url);
                //openShit(url);
                return false;
            });
        }
    }
}

问题是，当url收到警报时，它会将属性的值显示为null。我究竟做错了什么？如何在保持跨浏览器兼容性的同时修复它？

Answer 1

尝试将row.getAttribute('data-id');更改为this.getAttribute('data-id');

Answer 2

您按标记名获取元素，然后尝试为它们使用jquery函数。

this.getAttribute('data-id');

是要走的路。

HTML5 Data- *属性未按预期工作

2 个答案: