JavaScript DOM:html 表操作问题

JavaScript DOM: html table manipulation issue

本文关键字：操作 问题 html DOM JavaScript      更新时间：2023-09-26

>我有这样的表格：

<table class="inventoryItems" id="inventoryItems">
    <tr>
        <th id="itemCost" class="noLeft">id </th>
        <th id="soldAmount" class="right">Item Description    </th>
    </tr>
    <tr id="itemRow">
        <th >
            <input onBlur="shapeMapper(this)" ></input>
        </th>
        <th >
            <input onBlur="shapeMapper(this)" ></input>
        </th>
    </tr>
</table>

只是一个非常简单的表格，我正在尝试使用以下形式的JavaScript来操纵它：

function shapeMapper(arg){
    //arg goes unused for now.
    var tblName = "inventoryItems";
    var tbl = document.getElementById(tblName);
    var soldAmount = document.getElementById("soldAmount").cellIndex;
    var itemCost = document.getElementById("itemCost").cellIndex;
    var rowCount = tbl.rows.length;
    var itemList = "";
    var totalCost=0;
    var totalSold=0;
    for(var i = 1; i<=rowCount-1 ; i++){
        var fC = tbl.rows[i].cells[itemCost].firstChild;
        r=tbl.rows[i];
        alert(r.cells[itemCost].value);
        totalCost = totalCost + Number(r.cells[itemCost].firstChild.value) ; 
        totalSold = totalSold + Number(r.cells[soldAmount].firstChild.value) ;
    }
}

但是r.cells[itemCost].firstChild.value即使输入框中键入了值，也会返回为"未定义"......有人知道为什么吗？

尝试 

r.cells[itemCost].firstElementChild.value

否则，它将获得未定义值的textElement，因为空格和回车符被视为 DOM 中的节点。 firstChild获取第一个节点子级，而firstElementChild获取第一个元素子级。

但是，请注意，并非每个浏览器都支持firstElementChild（FF <3.5，IE <9）。

相关文章：