I am using the following function in a datatables table.
function novaData(d){
var dia = d.getDate().toString();
dia = (dia.length == 1) ? '0'+dia : dia;
var mes = (d.getMonth()+1).toString();
mes = (mes.length == 1) ? '0'+mes : mes;
var ano = d.getFullYear();
return dia+"-"+mes+"-"+ano;
}
class CellDate{
constructor( start_date ){
this.date = start_date;
}
getNextDate(){
if($('#user_data tbody tr').length){
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes-1);
this.date.setYear(ultimo_ano);
this.date.setDate( this.date.getDate()+1);
}else{
this.date.setMonth(this.date.getMonth()+1);
this.date.setDate(1);
}
return novaData(this.date);
}
}
var DateIndexer = new CellDate(new Date(Date.now()));
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html);
});
Within the class in getNextDate, when it is true (the table already has rows), creating a new row fills the date field with the date of the next day of the last row already entered.
But if the table has no row inserted, it returns in the date field NaN-NaN-NaN, because it does not enter into the else.
If you put console.log(DateIndexer.getNextDate()); before the function $('#add').click(function(){ returns 01-08-2019.
But if put console.log(DateIndexer.getNextDate()); inside the function $('#add').click(function(){ returns NaN-NaN-NaN.
Table #user_data:
<div class="container box">
<h3 align="center">MAPA DE TRABALHO</h3>
<h5 align="center">Ajudante de Ação Direta - Turno: Manhã</h5>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" name="add" id="add" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span></button>
</div>
<br />
<div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Your html has no tbody, returning null on you first execution
Try to include a tbody
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This will fix your code here:
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html); //<--- right here
});
Your condition on if need to be reviewed too, because on the first execution tbody was empty, change to this
class CellDate {
constructor(start_date) {
this.date = start_date;
}
getNextDate() {
//here the change for if condition
if ($('#user_data tbody tr') != null && $('#user_data tbody tr').length > 0) {
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes - 1);
this.date.setYear(ultimo_ano);
this.date.setDate(this.date.getDate() + 1);
console.log('if', this.date);
} else {
this.date.setMonth(this.date.getMonth() + 1);
this.date.setDate(1);
console.log('else', this.date);
}
return novaData(this.date);
}
}
Code here https://jsfiddle.net/nzb0tdjq/
Related
I have this dynamic table. Add more button append a new row. Row consists of number or days and date field. Means how many days added results in date.
Now in the second row, if I add a number of days; it must check the previous previous row date or number and result the date. But rowSelected.prev('tr')[0] gives me no value.
Can anybody please help me.
$(function() {
$("#add-more").click(function() {
$("#main-table").each(function() {
let tds = '<tr>';
jQuery.each($('tr:last td', this), function() {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
$(document).on('change', '.total-days', function(e) {
let rowSelected = $(this).closest('tr');
const someDate = new Date();
someDate.setDate(someDate.getDate() + parseInt($(this).val()));
const newDate = someDate.toISOString().substr(0, 10);
rowSelected.find('.expected-delivery-date').val(newDate);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-sm-6 right">
<a class="inline btn btn-primary" id="add-more">Add More</a>
</div>
<table class="table table-bordered" id="main-table" border="1">
<thead>
<tr>
<th>No.</th>
<th>From</td>
<th>Expected Delivery Date</td>
</tr>
</thead>
<tbody id="rows">
<tr>
<td><input class="form-control" type="text" name="deliverableNumber[]" /></td>
<td><input class="form-control total-days" type="number" value="1" name="deliverableNumberOfDays[]" /></td>
<td>
<input class="form-control expected-delivery-date" type="date" name="deliverableExpectedDeliveryDate[]" />
</td>
<td><i class="fa-2x fa fa-trash" onclick="SomeDeleteRowFunction(this)" title="Remove row"></i></td>
</tr>
</tbody>
</table>
I tried to include inside my page a script to add a dynamic row and every time I click on add, it save the data in database.
The problem is when I insert the data and click on add row, doesn't work.
How to write correctly this element?
<div class="mainTitle">Write a customer question : Intent</div>
<div class="adminformTitle">
<div class="form-group form-group-options col-md-12">
';
$content .= '
<table id="myTable" class="table table-sm table-hover order-list">
<thead>
<tr>
<td>User Question</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9">
' . HTML::inputField('user_question', null, 'placeholder="Write a short answer"'). '
</td>
<td class="col-md-2">
' . HTML::inputField('language', null, 'placeholder="Language"'). '
</td>
<td class="col-sm-1"><a id="delete_row" class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
';
the script ::
On click, it add a new row and save / delete data in function
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="user_question' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="language' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
// call files
$.ajax({
type: 'POST',
url: 'ajax.php',
success: function(data) {
alert(data);
$("p").text(data);
}
});
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
});
</script>
I have got a jsp page with a table.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead> <tr><input type=hidden value="hidden value" id="" lass="cls" />
<th>
Order ID
</th>
<th>
Customer Name
</th>
<th>
Delivery Date & Time
</th>
<th>
Amount
</th>
<th>
Payment Method
</th>
</tr>
</thead>
<tbody>
<c:forEach var="order" items="${orderList}" varStatus="status">
<tr id="mainOrderRow_${order.header.orderId}">
<form name="orderItemListForm${order.header.orderId}" id="orderItemListForm${order.header.orderId}" action="processOrder" method="POST">
<input type="hidden" name="orderId" id="orderId" value="${order.header.orderId}" />
<input type="hidden" name="orderAction" id="orderAction" value="" />
<input type="hidden" name="approverNotes" id="approverNotes" value=""/>
<input type="hidden" name="inStockItems" id="inStockItems" value=""/>
<td>
${order.header.orderId}
</td>
<td>
${order.header.user.userName}
</td>
<td>
${order.header.deliveryTime}
</td>
<td>
${order.header.totalAmount.currency}
<fmt:formatNumber value="${order.header.totalAmount.value}" type="number"
maxFractionDigits="2" minFractionDigits="2" />
</td>
<td>
${order.header.paymentMethod}
</td>
</td>
</form>
</tr>
</c:forEach>
</tbody>
</table>
When I click on the '+' on each row, it expands to display the details(taken from the JSON, orderJson) of the table. I've written it using javascript.
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
selectedOrderId = aData[1];
var orderJsonString = orderMap[''+selectedOrderId];
var orderJson = JSON.parse(orderJsonString);
var Items = orderJson.order.Items;
var sOut = '<div class="row">';
sOut += '<div class="col-md-7"><h3>Order Details for ID: '+selectedOrderId+'</h3><div class="table-responsive"><table class="table table-bordered orderDetails orderDetails">';
sOut += '<thead><tr><th>Product Name</th><th>Quantity</th><th>Price/Unit</th><th>Availability</th><th>Total Price</th></tr></thead>';
sOut += '<tbody>';
var Currency = "";
for(var itemLoop in Items){
sOut += '<tr><td><del>'+Items[itemLoop].ProductName+'</del></td><td><del>'+Items[itemLoop].Quantity+'</del></td><td><del>'+Items[itemLoop].Currency+' '+Items[itemLoop].UnitPrice+'</del></td><td><del> <input type="checkbox" class="inStockItems" name="inStockItems" id="inStockItems" value="'+Items[itemLoop].ItemId+'" disabled> In Stock</del></td><td><del>'+Items[itemLoop].Currency+' '+Items[itemLoop].TotalItemPrice+'</del></td></tr>';
Currency = ''+Items[itemLoop].Currency;
}
sOut += '</tbody>';
sOut += '<tfoot><tr><td> </td><td> </td><td> </td><td> </td><td>'+Currency+' '+orderJson.order.TotalItemsPrice+'</td></tr></tfoot>';
sOut += '</div></div><div class="col-md-5"><div class="col-md-12">';
sOut += '<h3>';
if(orderJson.order.Status == "Submitted" ){
sOut += '<input type="button" value="Accept" class="btn btn-info" onclick="processOrder('+selectedOrderId+','+'\'accept\''+')">';
sOut += '<input type="button" value="Reject" class="btn btn-danger" onclick="processOrder('+selectedOrderId+','+'\'reject\''+')"> ';
}else if(orderJson.order.Status == "Accepted"){
sOut += '<input type="button" value="Ship" class="btn btn-warning" onclick="processOrder('+selectedOrderId+','+'\'ship\''+')">';
}else if(orderJson.order.Status == "Shipped"){
sOut += '<input type="button" value="Deliver" class="btn btn-success" onclick="processOrder('+selectedOrderId+','+'\'deliver\''+')">';
}
sOut += 'Print Delivery Details</h3>';
sOut += '<div class="table-responsive">';
sOut += '<table class="table table-bordered orderSummery">';
sOut += '<tr><td>Customer Address</td><td>'+orderJson.order.Address+'</td></tr><tr><td>Delivery Method</td><td>'+orderJson.order.DeliveryMethod+'</td></tr>';
if (orderJson.order.CustomerNote == null) {
sOut += '<tr><td>Customer's Note</td><td></td></tr>';
} else {
sOut += '<tr><td>Customer's Note</td><td>'+orderJson.order.CustomerNote+'</td></tr>';
}
sOut += '</table>';
sOut += '</div></div></div></div>';
return sOut;
}
Here is the function process order:
function processOrder(orderId, actionName) {
var formName = "orderItemListForm" + orderId;
if (actionName == 'accept') {
document.forms[formName].orderAction.value = actionName;
document.forms[formName].submit();
}
}
}else if(actionName == 'reject'){
if(document.getElementById("t_approverNotes").value == ''){
alert("Please provide a reason for rejection");
document.getElementById("t_approverNotes").focus();
}else{
document.forms[formName].orderAction.value = actionName;
document.forms[formName].approverNotes.value = $.trim($("#t_approverNotes").val());
document.forms[formName].submit();
}
}else {
document.forms[formName].orderAction.value = actionName;
document.forms[formName].submit();
}
}
My problem is, when I click a button(Accept, Reject, Ship, Deliver) on the expanded area and when the page reloads after the form is submitted, the area is collapsed, showing only the rows of the table. I want the area in the expanded form (can't use ajax here as it will cause problems when too many persons are logged in) when the page is reloaded. Any idea how to do it?
You'll have to store the date locally to the user - my suggestion is using localStorage, but you can also use Cookies. When you initialize your app, you'll have to read the state back out of localStorage (or Cookie) and expand the rows that should be expanded.
Here's a quick localStorage example:
var appState = { openRows: [1, 3, 5] }; // example state object with IDs of rows that are expanded
// Storing your app state
if (localStorage) {
localStorage.setItem('appState', JSON.stringify(appState));
}
// Reading your app state
var appState = JSON.parse(localStorage.getItem('appState'));
// Code that expands all the rows that should be expanded
In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one
$(document).ready(function() {
$('#chemist_allotment_btn').click(function() {
if ($('#chemist_allotment_form').valid()) {
$.ajax({
url: 'update_chemist_bulk_transfer.php',
type: 'POST',
data: $('form#chemist_allotment_form').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function(key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td>' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td>' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
$('#SampleDT tbody').empty().append(htmlString);
$('#get_to_area').click(function() {
var id = $('input[name=getchemist]:checked').val();
if ($(".getchemist").prop('checked') == true) {
alert(id);
alert(value.to_area);
} else {
alert('Please Check');
}
});
} else {
$('#SampleDT tbody').empty().append('No Datas Found');
}
},
});
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<center>
<div class="form-group">
<button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>
Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select
Somewhat like this:
<tr class="row-select">
<td class="select">...</td>
<td class="id">...</td>
<td class="to-area">...</td>
.
.
.
</tr>
Use jQuery like this:
$('.row-select').click(function(){
var id,toArea,checkBox;
id = $(this).find('.id').html(); //get the ID field
toArea = $(this).find('.to-area').html(); //get the to-area field
checkBox = $(this).find('.select > input');
checkbox.prop('checked',!checkbox.prop('checked'));
})
This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox
To get the values of rows selected when the form is submitted run a loop like this
$('.row-select input:checked').each(function(){
var id,toArea,checkBox;
id = $(this).closest('tr').find('.id').html(); //get the ID field
toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})
EDIT
All together:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('.row-select input:checked').each(function() {
var id, name;
id = $(this).closest('tr').find('.id').html();
name = $(this).closest('tr').find('.name').html();
alert('ID: ' + id + " | Name: " + name);
})
})
$('#btnSelectAll').click(function() {
$('.row-select input').each(function() {
$(this).prop('checked', true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">12</td>
<td class="name">Jones</td>
</tr>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">10</td>
<td class="name">Joseph</td>
</tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>
Process step-by-step:
Give the td you need some classes (from-a & to-a);
Initialize an empty array all (we'll store the data inside it later on);
Create a function that is triggered by the checkbox change
Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
If the state = checked we will add the values to the all (our small data storage);
If the state = not-checked we will remove the value from the all array;
Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.
var all = [];
$('input[type="checkbox"]').change(function(){
var checkbox = $(this);
var state = checkbox.prop('checked');
var tr = checkbox.parents('tr');
var from = tr.children('.from-a').text();
var to = tr.children('.to-a').text();
if(state){
all.push(from + ' -> ' + to);
}else{
var index = all.indexOf(from + ' -> ' + to);
all.splice(index, 1);
}
})
$('#get_to_area').click(function(){
alert(all);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox"></td>
<td>1</td>
<td>Nick</td>
<td class="from-a">Kosur</td>
<td class="to-a">Nath Pari</td>
<td>Address</td>
</tr>
<tr id="2">
<td><input type="checkbox"></td>
<td>2</td>
<td>John</td>
<td class="from-a">Rusok</td>
<td class="to-a">iraP htaN</td>
<td>sserddA</td>
</tr>
</tbody>
</table>
<center>
<div class="form-group">
<button style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.
You can also use this fiddle:
In JS:
$('#get_to_area').click(function () {
var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
}
else {
alert('Please Check');
}
});
In Html:
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function (key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td class="chkid">' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td class="toarea">' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.
As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.
var Result = new Array();
$('.checkbox-custom input[type="checkbox"]:checked').each(function(){
var _this = $(this).closest('tr').find('td');
var id= $(_this).eq(0);
var name = $(_this).eq(1);
................... //Similar way for the others
Result.Push(id,name,....)
});
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
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;
}
}
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