我需要传递对href
标记中点击的当前元素的引用。
考虑在创建表时循环进入的代码
td=document.createElement("td");
td.innerHTML='<a href="javascript: some_function(this,row_number,'extra_param')">click me</a>';
但this
不起作用,因为它指向浏览器窗口,因此当我将其设置为某个内容时,整个页面将替换为我设置的值。那么如何将<a>
对象的引用传递给some_function()
?
其中some_function()
被声明为:
function some_function(clicked_object,param2,param3) {
clicked_object.style.backgroundColor="red"
}
答案 0 :(得分:1)
这是一个完全成熟的解决方案,可以避免使用内联代码:
for (var i = 0; i < 10; i++) {
// create elements
let td = document.createElement("td");
let a = document.createElement("a");
a.innerHTML = `cell #${i}`;
a.href = ""; // we need this so <a> appears as link
// set click handler
a.addEventListener("click", some_function);
// add some data
a.dataset.rowNumber = 1;
a.dataset.extra = i * 2 + 7;
td.appendChild(a);
row.appendChild(td);
}
function some_function(e) {
e.preventDefault(); // stop default event handling
let clicked_object = e.target; // get clicked element from event
clicked_object.style.backgroundColor = "red";
console.log("param:", clicked_object.dataset.extra);
}
&#13;
<table>
<tbody>
<tr id="row"></tr>
</tbody>
</table>
&#13;
编辑:向元素添加数据