Retrieving value from a textbox in HTML table

Question

Hi, I have a table which has textboxes in its cells. All these textboxes are created and populated dynamically by using PHP. I have to iterate through the cells and get the values.

By using the following code, I am able to get the innerHTML of the cells.

var tblLang = document.getElementById("tbl_Languages");
var tblrows = tblLang.rows;
for(var i=1; i<tblrows.length; i++){
var tblcells = tblrows[i].cells;
alert(tblcells[0].innerHTML);

The output for the given code is

<input background-color="#FFFFFF" haslayout="-1" id="txtname_ENU" value=" English" type="text">

How could I get the value of the inner textbox? Please help me.

Answer 1

Did you mean:

var textBoxValue = document.getElementById("txtname_ENU").value;
alert(textBoxValue);

Answer 2

You want to get the actual dom node from the table cell instead of the innerHTML (a string). This will allow you to call .value on that node and you're all good. SOmething like:

   tblcells[0].firstChild.value
   // or iterate through children
   var childLength = tblcells.childNodes.length
   for(var i=0;i<childLength;i++){
     alert(tblCells.childNodes[i].value);
   }

Also note that in your code when you're iterating for(var i=1; i<tblrows.length; i++){ you're checking the length of your tblrows array every time which is slow. You should check that length once, as in my code first, then use it in the loop.