Question

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

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

我遇到的问题是我似乎无法参考附加信息以获取相关价格栏（第三栏）中的信息。

我已经附加了我正在使用的函数来创建正在工作的表和我正在使用的函数来尝试添加它不起作用。

我发现以下两篇文章Getting access to a jquery element that was just appended to the DOM和How do I refer to an appended item in 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是输入元素。您可以随时使用javascript引用它，无论是在将其插入DOM之前还是之后。

在这段代码中：

        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="mainData"的ID，那么您只需使用

即可

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
}

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

1 个答案: