javascript - 传递元素的 id 但获取元素本身

Question

Here是我的问题的示例，下面是相同的代码HTML

<button id='preview_btn'>Add</button>

<table id="point_tbl">
    
</table>

JavaScript

var pointList = [];

function deletePoint(id) {
  console.log(id);     // should be string but turns out to be the tr element
    for (var i = 0; i < pointList.length; i++) {
        if (pointList[i].id == id) {
            pointList.splice(i, 1);
            document.getElementById(id).remove();
            document.getElementById(id + "item").remove();
        }
    }
}

function getTemplate(obj) {
    var id = obj.id + "item";
    var aa = obj.id;
    var row = "<tr id = '" + id + "'><td>" + obj.sn + "</td><td>" + obj.x + "</td><td>" + obj.y + "</td><td>" + obj.tx + "</td><td>" + obj.ty + "</td><td>" + obj.lbl + "</td><td><button  class='del_point' onclick = 'deletePoint("+id+");'>Delete</button></td></tr>";
    return row;
}

document.getElementById("preview_btn").onclick = function(event) {
var id =  getUniqueId();
    var obj = {sn: pointList.length, x: 10, y: 10, tx: "0.5", ty: "0.5", lbl: "", id: id};
    $('#point_tbl').append(getTemplate(obj));
    pointList.push(obj);
}

function getUniqueId() {
    if (!getUniqueId.idList) {
        getUniqueId.idList = [];
    }
    var id = "uniqueID" + Math.round(Math.random() * 1000 + 1);
    if (getUniqueId.idList.indexOf(id) != -1) {
        return getUniqueId();
    } else {
        getUniqueId.idList.push(id);
    }
    return id;
}

当单击添加按钮时，将添加一个带有按钮的新行。在这个新添加的按钮上，使用 getTemplate 函数绑定(bind) deletePoint 函数。 deletePoint 函数接受由 getTemplate 函数创建的行 (tr) 的 ID。

我正在记录 deletePoint 函数中传递的参数。我原以为这是该行的 id(基本上是一个字符串)，但结果却是整个 tr 元素。

无法解决问题，请帮忙。

Answer 1

发生的情况是事件处理程序中生成的代码是

deletePoint(someId)

而不是

deletePoint("someId")

由于大多数浏览器在全局范围内为所有具有 id 的元素创建一个变量(变量的名称就是 id)，因此您传递该元素，而不是字符串(在某些浏览器中，您将传递 undefined).

立即修复:更改

onclick = 'deletePoint("+id+");'

至

onclick = 'deletePoint(\""+id+"\");'

更好:不要在 HTML 中内联 JS 代码以避免这些问题。例如，为您的单元格提供 id 和数据属性，然后像处理其他元素一样进行绑定(bind)。