CODEWITHSUNDEEP
javascripthtmlcss
bibhu.m
bibhu.m

Reputation: 13

How to read value of Textbox which is inside table using javascript

<head>

<title>Projects</title>

<style type="text/css">

.newtable
{

width:60%;

border:3px solid brown;

font-size:18px;

border-collapse: collapse;

border-spacing: 0;

border-padding: 10;

cellspacing: 0;

}

#newtable
{

width:60%;

border:3px solid brown;

font-size:18px;

border-collapse: collapse;

border-spacing: 0;

border-padding: 10;

cellspacing: 10;

}

#newtable td
{

width:200;

background-color:gray;

border:2px solid brown;

text-align:center;

border-padding: 10;

cellspacing: 10;

}

</style>

<script type="text/javascript">

function makeTable()

   {

    row=new Array();


    cell=new Array();


    row_num=20;


    cell_num=4;


    tab=document.createElement('table');


    tab.setAttribute('id','newtable');


    tbo=document.createElement('tbody');


    tbo.setAttribute('id','tabody');


    for(c=0;c<row_num;c++)

    {


    row[c]=document.createElement('tr');


    for(k=0;k < cell_num;k++)

    {


    cell[k] = document.createElement('td');


    if (k > 0)

    {


    cont=document.createElement("input");


cont.setAttribute('type','text');


cell[k].appendChild(cont);


row[c].appendChild(cell[k]);


}


else
{


cont=document.createTextNode("0" + (c+1));


cell[k].appendChild(cont);


row[c].appendChild(cell[k]);                    


}


}



tbo.appendChild(row[c]);


}


tab.appendChild(tbo);


document.getElementById('mytable').appendChild(tab);


mytable.setAttribute("align", "top-left");


}


function GetCellValues()
{


row=new Array();


cell=new Array();


row_num=20;


cell_num=4;


tab = document.getElementsByTagName('table');


tbo = tab.getElementsByTagName('tbody');


for(=0 ; c < row_num; c++)
{   


row = tbo.getElementsByTagName('tr');


for(k=0; k < cell_num; k++)
{


cell = row.getElementsByTagName('td');
{


cont=cell.getElementsByTagName('input');
{


alert(cont.value);


}   


}


}


}


}

</script>


</head>




</html>

Upvotes: 0

Views: 295

Answers (2)

drk
drk

Reputation: 21

You're reading correctly by accessing the .value property, the problem lies elsewhere.

Here is a cleaner version: https://gist.github.com/anonymous/7331383

The problems you had:

  • First don't forget to declare the variables you're using.
  • You were adding to arrays (row/cell) which wasn't really needed.
  • The table wasn't being added to the body
  • Need to call makeTable() on load (the other function can be called from the console, or you can add a button for that).
  • unnecessary braces in GetCellValues(), use a good editor and don't forget to indent the code, to prevent this
  • Use console.log() to print to the console when testing, instead of alert()

And maybe other stuff I'm not remembering xD

Hope it helps.

Upvotes: 1

Hamid Bahmanabady
Hamid Bahmanabady

Reputation: 665

Assign class to inputs then get by class name

var elements =document.getElementsByClassName('test');
for(var i=0;i<elements.length;i++)
{
    console.log(elements[i].value);
}

Upvotes: 0

Related Questions