Estoy creando dinámicamente una tabla y cada fila tiene un botón. Al hacer clic en el botón O, quiero extraer los valores de celda de esa fila.
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 para crear:
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 para extraer:
$('#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 }); });Oye, estás intentando acceder al valor del elemento td pero el valor real se almacenará en el elemento de entrada dentro del elemento td. Compruebe el fragmento de código.
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>Esto es lo que se me ocurre según la respuesta de Abhilash:
js para crear:
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 para extraer:
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();