在使用javascript而不是jquery附加元素后如何引用元素

Question

我正在做一些基本的javascripting，并创建一个3列表，该表由xml的javascript创建。 该表格是通过javascript将所有数据附加到行中而创建的。

第一列具有通过javascript创建的输入复选框，如果选中该复选框，则会从该行的第三列获取价格，并添加所选行的所有价格以得出总价。

我遇到的问题是我似乎无法引用附加信息来获取相关价格列（第三列）中的信息。

我已经附加了我正在使用的创建表的功能和我要尝试添加的不起作用的功能。

我发现以下两篇文章可以访问刚刚附加到DOM的jquery元素，以及如何在jQuery中引用附加项？ 但我只使用javascript，而不使用jquery，并且如果可能，希望使用仅javascript的解决方案。

你能帮我吗？ -只是calculateBill函数无法正常工作。

先感谢您

function addSection() {
    var section = xmlDoc.getElementsByTagName("section");

    for (i=0; i < section.length; i++) {

        var sectionName = section[i].getAttribute("name");
        var td = document.createElement("td");
        td.setAttribute("colspan", "3");
        td.setAttribute("class","level");
        td.appendChild(document.createTextNode(sectionName));

        var tr = document.createElement("tr");
        tr.appendChild(td);
        tbody.appendChild(tr);

        var server = section.item(i).getElementsByTagName("server");

        for (j=0; j < server.length; j++) { 
            var createTR = document.createElement("tr");
            var createTD = document.createElement("td");
            var createInput = document.createElement("input");
            createInput.setAttribute("type", "checkbox");
            createInput.setAttribute("id", "checkInput");
            createTD.appendChild(createInput);
            createTR.appendChild(createTD);

            var item = server[j].getElementsByTagName("item")[0].innerHTML;
            var createTD2 = document.createElement("td");
            var createText = document.createTextNode(item);
            createTD2.appendChild(createText);
            createTR.appendChild(createTD2);

            var price = server[j].getElementsByTagName("price")[0].innerHTML;
            var createTD3 = document.createElement("td");
            var createText2 = document.createTextNode("£" + price);
            createTD3.appendChild(createText2);
            createTR.appendChild(createTD3);
            tbody.appendChild(createTR);
        }
    }
}

onload = addSection();

function calculateBill() {
    var finalBill = 0.0;
    var checkBox = document.getElementById("checkInput");
    for (i=0; i < checkBox.length; i++) {
        if (checkBox[i].checked) {
            var parentTR = checkBox[i].parentNode;
            var priceTD = parentTR.getElementsByTagName('td')[2];
            finalBill += parseFloat(priceTD.firstChild.data);
        }
    }
    return Math.round(finalBill*100.0)/100.0;
}

var button = document.getElementById("button");
button.onClick=document.forms[0].textTotal.value=calculateBill();

Answer 1

当您执行x.appendChild(y) ， y是您要附加的DOM节点。 您可以在添加之前或之后通过javascript引用它。 如果您仅停留在DOM引用上，就不必再次查找它。

因此，在这段代码中：

        var createInput = document.createElement("input");
        createInput.setAttribute("type", "checkbox");
        createInput.setAttribute("id", "checkInput");
        createTD.appendChild(createInput);

createInput是输入元素。 您可以在将其插入DOM之前或之后随时使用javascript对其进行引用。

在这段代码中：

        var price = server[j].getElementsByTagName("price")[0].innerHTML;
        var createTD3 = document.createElement("td");
        var createText2 = document.createTextNode("£" + price);
        createTD3.appendChild(createText2);
        createTR.appendChild(createTD3);
        tbody.appendChild(createTR);

您正在创建一个<td>元素并为其添加价格。 createTD3是特定的<td>元素。

---

如果您希望在代码块运行很长时间以后的某个时候找到该元素，那么建议您给它提供一个标识ID或类名，以便可以使用某种DOM查询来找到它再次。 例如，您可以在"price"上添加一个类名称，然后稍后可以再次找到它：

        var price = server[j].getElementsByTagName("price")[0].innerHTML;
        var createTD3 = document.createElement("td");
        createTD3.className = "price";
        var createText2 = document.createTextNode("£" + price);
        createTD3.appendChild(createText2);
        createTR.appendChild(createTD3);
        tbody.appendChild(createTR);

然后，您可以通过以下方式再次找到所有价格要素：

tbody.querySelectorAll(".price");

假设tbody是放置所有这些元素的表（因为这是您在所附代码中使用的表）。 如果表本身上面有一个id，例如id="mainData" ，那么您可以简单地使用

document.querySelectorAll("#mainData .price")

获得所有价格要素。

---

仅供参考，这是一个方便的函数，该函数从任何节点开始进入DOM树，并找到具有特定标记类型的第一个节点：

function findParent(node, tag) {
    tag = tag.upperCase();
    while (node && node.tagName !== tag) {
        node = node.parentNode;
    }
    return node;    
}

// example usage:
var row, priceElement, price;
var checkboxes = document.querySelectorAll(".checkInput");
for (var i = 0; i < checkboxes.length; i++) {
    // go up to the parent chain to find out row
    row = findParent(checkboxes[i], "tr");
    // look in this row for the price
    priceElement = row.querySelectorAll(".price")[0];
    // parse the price out of the price element
    price = parseFloat(priceElement.innerHTML.replace(/^[^\d\.]+/, ""));
    // do something here with the price
}