Question

I have a table like this:

<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>

Just a really simple table,
and I am trying to manipulate it with JavaScript of the following form:

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) ;
    }
}

but r.cells[itemCost].firstChild.value even when there is value typed into the inputbox comes back as "undefined"…does anyone have any idea why?

Answer 1

try

r.cells[itemCost].firstElementChild.value

otherwise it gets a textElement of undefined value, because spaces and carriage returns are considered as nodes in the DOM. firstChild gets the first node child, while firstElementChild gets the first element child.

However, be aware that firstElementChild is not supported on every browser (FF < 3.5, IE < 9).