How to take value from cell in javascript

Question

I have a grid setter in javascript like this :

function AddMdrPymt(){
    var f = document.frmPL0011; 
    var grid = document.getElementById("mdrPymtGrid");
    var numRows = grid.rows.length;

    grid.insertRow(numRows);

    grid.rows[numRows].insertCell(0);
    grid.rows[numRows].insertCell(1);
    grid.rows[numRows].insertCell(2);
    grid.rows[numRows].insertCell(3);

    grid.rows[numRows].cells[0].innerHTML = "<input type='checkbox' value='" + curRow + "' name='__mdrPymt' id='__mdrPymt'>";
    grid.rows[numRows].cells[1].innerHTML = "<table border='0' align='center'><tr align='center'><td><input type='text' onkeyPress='checkNumber(this)' name='txt_strtAmnt' id='txt_strtAmnt' class='" + txtclass + "' maxlength='18' size='25' fieldName='<%=LangFormatter.getString("PL0011_LoanStartAmnt", true)%>' onblur='checkData(this)' value = '" + val + "' "+dsb+"></td></tr></table>";
        grid.rows[numRows].cells[2].innerHTML = "<table border='0' align='center'><tr align='center'><td><input type='text' onkeyPress='checkNumber(this)' name='txt_endAmnt' id='txt_endAmnt' class='portlet-form-input-field' maxlength='18' size='25' fieldName='<%=LangFormatter.getString("PL0011_LoanEndAmnt", true)%>' onblur='checkData2(this)'></td></tr></table>";

curRow += 1;

And this is the grid HTML, the HTML code for the grid tittle, and the function above is function when user press add button

<table width="95%" align="center">
                <tr> 
                    <td>
                        <input name="addBtn" id="addBtn" type=button class='btn' onmouseover="this.className='btnHov'" onmouseout="this.className='btn'" value="<%=LangFormatter.getString("button_add",true)%>" onclick="AddMdrPymt()" tabindex="4">
                        <input name="delBtn" id="delBtn" type=button class='btn' value="<%=LangFormatter.getString("button_dlt",true)%>" onclick="delMdrPymt()" onmouseover="this.className='btn btnHov'" onmouseout="this.className='btn'" tabindex="5">
                    </td>
                </tr>
                <tr>
                    <td>                
                        <table border="0" cellspacing="1" cellpadding="1" name="mdrPymtGrid" id="mdrPymtGrid" class="grid" width="95%">
                            <thead class="header">
                                <th width="1%"></th>
                                <th width="20%"><%=LangFormatter.getString("PL0011_LoanStartAmnt",true)%></th>
                                <th width="20%"><%=LangFormatter.getString("PL0011_LoanEndAmnt",true)%></th>
                                <th width="20%"><%=LangFormatter.getString("PL0011_FixAmntInd",true)%></th>
                                                                <th width="20%"><%=LangFormatter.getString("PL0011_FixCashAmnt",true)%></th>
                                <th width="20%"><%=LangFormatter.getString("PL0011_CashbackLoanAmnt",true)%></th>
                            </thead>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="addBtn" id="addBtn" type=button class='btn' onmouseover="this.className='btnHov'" onmouseout="this.className='btn'" value="<%=LangFormatter.getString("button_add",true)%>" onclick="AddMdrPymt()" tabindex="6">
                        <input name="delBtn" id="delBtn" type=button class='btn' value="<%=LangFormatter.getString("button_dlt",true)%>" onclick="delMdrPymt()" onmouseover="this.className='btn btnHov'" onmouseout="this.className='btn'" tabindex="7">
                    </td>
                </tr>
            </table>

How to get value from txt_strtAmnt ?

Thank you

Answer 1

If you are using grid with multiple rows then solution provided by @Arun will not work, To make it work 1)find grid element first with document.getElementById('gridid'); 2)iterate through its children 3)in that iteration loop find document.getElementById('txt_strtAmnt').value

I am sure that will help you ! also we can achieve through JQuery if you want

Answer 2

Please use the below code snippet to get the TABLE > TR > TD HTML elemnt value : -

/* To get any TD element value. If one input type inside TD element. No need to mention the id name as we are getting the value using Tag Name. */

var grid = document.getElementById("mdrPymtGrid");
var tableRows = grid.getElementsByTagName("tr");

for (var j = 0 ; j <= tableRows.length; j++){
    var tds = tableRows[j].getElementsByTagName("td");
     for (var k = 0 ; k <= tds.length; k++){  
     var strtAmntVal = tds[k].getElementsByTagName('input')[0].value;   
     break;
    }
}