CODEWITHSUNDEEP
javascripthtmljquery
Glyn
Glyn

Reputation: 1995

How to extract the values of dynamically created table cells from a table on button click?

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

Upvotes: 0

Views: 115

Answers (2)

Glyn
Glyn

Reputation: 1995

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();

Upvotes: 0

Abhilash CR
Abhilash CR

Reputation: 194

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>

Upvotes: 1

Related Questions