I am dynamically creating a table and each row has a button. On click of the button OI want to extract that row's cell values.
HTML:
<table class="table table-hover table-bordered" id="alterationsTable">
<thead>
<tr>
<th>Date</th>
<th>Problem/Event</th>
<th>Discuss</th>
<th>Outcome Modification</th>
<th>Add/Update</th>
</tr>
</thead>
<tbody id="alterationsTablebody">
<tr>
<!-- Place for training alterations/notes details -->
</tr>
</tbody>
</table>
js to create:
var html = '';
html += "<tr><td style='width : 1%; white-space: nowrap;'><input type='date' id='date' name='date' class='alterationsDetailDate' value='" + todayDate + "'></td>";
html += "<td><input type='text' id='0' name='problem' class='alterationsDetail maxWidth' value=''></td>";
html += "<td style='text-align : center; width : 1%; white-space: nowrap;'><input type='checkbox' id='0' name='discuss' class='form-check-input alterationsDetail' value=''></td>";
html += "<td><input type='text' id='0' name='outcome' class='alterationsDetail maxWidth' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' id='addAltBtn' name='addAltBtn' class='alterationsAdd btn-info' value='Add'></td></tr>";
$(html).appendTo($("#alterationsTablebody"));
js to extract:
$('#alterationsTable tbody').on( 'click', '#addAltBtn', function () {
alert("here");
alert($(this).parents('tr:first').find('td:eq(1)').text());//Returns blank
var $row = $(this).closest("tr"),// Finds the closest row <tr>
$tds = $row.find("td");// Finds all children <td> elements
$.each($tds, function() { // Visits every single <td> element
alert($(this).val()); // Returns blank
});
});
Hey you are trying to access value from td element but actual value will be stored in input element inside td element. Check the code snippet.
var html = '';
var todayDate = new Date();
html += "<tr><td style='width : 1%; white-space: nowrap;'><input type='date' id='date' name='date' class='alterationsDetailDate' value='" + todayDate + "'></td>";
html += "<td><input type='text' id='0' name='problem' class='alterationsDetail maxWidth' value=''></td>";
html += "<td style='text-align : center; width : 1%; white-space: nowrap;'><input type='checkbox' id='0' name='discuss' class='form-check-input alterationsDetail' value=''></td>";
html += "<td><input type='text' id='0' name='outcome' class='alterationsDetail maxWidth' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' id='addAltBtn' name='addAltBtn' class='alterationsAdd btn-info' value='Add'></td></tr>";
let tableBodyElement=document.getElementById("alterationsTablebody");
$(html).appendTo($("#alterationsTablebody"));
$('#alterationsTable tbody').on( 'click', '#addAltBtn', function () {
alert("here");
alert($(this).parents('tr:first').find('td:eq(1)').children(':first').val());
var $row = $(this).closest("tr"),// Finds the closest row <tr>
$tds = $row.find("td");// Finds all children <td> elements
$.each($tds,function() { // Visits every single <td> element
if($(this).children(':first').prop('type')=="checkbox"){// checking for checkbox
alert($(this).children(':first').prop('checked'))
}
else{
alert($(this).children(':first').val()); // return value
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-bordered" id="alterationsTable">
<thead>
<tr>
<th>Date</th>
<th>Problem/Event</th>
<th>Discuss</th>
<th>Outcome Modification</th>
<th>Add/Update</th>
</tr>
</thead>
<tbody id="alterationsTablebody">
<tr>
<!-- Place for training alterations/notes details -->
</tr>
</tbody>
</table>This is what I can up with based on Abhilash's answer:
js to create:
var html = '';
html += "<tr><td style='width : 1%; white-space: nowrap;'><input type='text' id='id' name='id' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' id='date' name='date' value='" + todayDate + "'></td>";
html += "<td><input type='text' id='problem' name='problem' class='maxWidth' value=''></td>";
html += "<td style='text-align : center; width : 1%; white-space: nowrap;'><input type='checkbox' id='discuss' name='discuss' class='form-check-input' value=''></td>";
html += "<td><input type='text' id='outcome' name='outcome' class='maxWidth' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' id='addAltBtn' name='addAltBtn' class='btn-info' value='Add'></td></tr>";
$(html).appendTo($("#alterationsTablebody"));
js to extract:
var date = $(this).parents('tr:first').find('input[id="date"]').val();
var problem = $(this).parents('tr:first').find('input[id="problem"]').val();
if ($(this).parents('tr:first').find('input[id="discuss"]').is(':checked')){
discuss = "Y";
}else{
discuss = "N";
}
var outcome = $(this).parents('tr:first').find('input[id="outcome"]').val();