CODEWITHSUNDEEP
javascripthtml
bibhu.m
bibhu.m

Reputation: 13

how to get the textbox value within table in alert message using javascript

This is the table created dynamically using javascript, I want to show this textbox value in alert message using GetCellValues() function.

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

Please check the GetCellValues() function, this function is not showing the textbox value in alert message.

function GetCellValues()
{
    row=new Array();    
    cell=new Array();

    row_num=20;    
    cell_num=4;

    tab = document.getElementsByTagName('table');   
    tbo = tab.getElementsByTagName('tbody');

    for(c = 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);
                 }
             }
         }
     }
}

Upvotes: 0

Views: 2736

Answers (5)

Barun
Barun

Reputation: 1622

A shortcut approach would be to use ID attribute of tag.

Sample TD tag with ID:

<td id="1_1">1st row 1st column</td><td id="1_2">1st row 2nd column</td>

Javascript to get TD with ID:

var row_len=1,col_len=2;

for (r = 0; r< row_len; r++) {
    for (c = 0; c < coll_len; c++) {
        alert(document.getElementById(r+'_'+c));        
    }
}

Upvotes: 0

Mithlesh Kumar
Mithlesh Kumar

Reputation: 758

I think you need some modification in GetCellvalues function as tab.getElementsByTagName('tbody'); will not get elements having tag name tbody for thi you should use document.getElementsByTagName.

you can check working demo of you code here

Upvotes: 2

kundan Karn
kundan Karn

Reputation: 224

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <table id="mytable"></table>
    <input type="button" onclick="GetCellValues(20, 4);" value="click me" />

    <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');
                        cont.setAttribute('value', '');
                        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");           

        }
        makeTable();

        function GetCellValues(row_num, cell_num) {
            var arrInput = document.getElementsByTagName('input');
            var index = (row_num - 1) * (cell_num - 1);
            alert(arrInput[index].value);            
        }        

    </script>

</body>
</html>

Upvotes: 0

sebapalus
sebapalus

Reputation: 556

getElementsByTagName returns collection, you need to iterate through it or assume the first element - apply to row, cell, e.g.

var rows = tbo.getElementsByTagName('tr');
for (var c = 0; c < row_num; c++) {
     row = rows[c];
     var cells = row.getElementsByTagName('td');
     for (var k = 0; k < cell_num; k++) {
          cell = cells[k];
          // and so on
     }
}

Upvotes: 0

Pranav Gupta
Pranav Gupta

Reputation: 944

If you are getting an alert box with [object HTMLCollection] message in it, then you need to use alert(cont[0].value) in place of alert(cont.value) at the end of your GetCellValues function.

Upvotes: 0

Related Questions