This is the table rows created dynamically. I want to find the first column text on click of row. How to find row index for dynamic table and on basis of that get column text?
// table row
if (tableType == "campaignData") {
var newCampaignRow = `
<tr aria-selected="false" class="campaign-table-row slds-hint-parent">
<td role="gridcell" style="display:none;">
<div class="slds-truncate" title="">CMP` + resultRowsJson[i]["Campaign_CD"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Campaign_NM"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Send_Type"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Status"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Sends"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + formatDateCreated + `</div>
</td>
</tr>
`;
$("#campaign_rows").append(newCampaignRow);
// click function for row and get the row index and column text.
$("#tbl").click("tr", function () {
var index = $(this).index();
console.log("Row index is: " + index);
var myValue = $('#tbl tr').eq(index).find("div[id=code]").html();
console.log(myValue);
});
}
I hope this will help you to solving your problem;
var resultRowsJson = [
{ "Campaign_CD":1,"Campaign_NM":"Sample","Send_Type":"e-mail", "Status":"booked","Sends":"none"}
];
var globalRowCounter = 0;
var formatDateCreated = "temp variable will change after problem solved";
function AddNew(){
var i = 0; // I think you forgot this variable, guess codes from in a loop :)
var newCampaignRow = `
<tr aria-selected="false"
onclick="rowClick(this)"
class="campaign-table-row slds-hint-parent"
data-row-index="`+globalRowCounter+`">
<td role="gridcell" style="display:none;">
<div id="code" class="slds-truncate" title="">
CMP` + resultRowsJson[i]["Campaign_CD"] + `
</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Campaign_NM"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Send_Type"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Status"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + resultRowsJson[i]["Sends"] + `</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="">` + formatDateCreated + `</div>
</td>
</tr>
`;
$("#campaign_rows").append(newCampaignRow);
globalRowCounter++;
}
// click function for row and get the row index and column text.
function rowClick(ths) {
var index = $(ths).attr("data-row-index");
console.log("Row index is: " + index);
var myValue = $('#campaign_rows tr').eq(index).find("div[id='code']").html();
console.log(myValue);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="campaign_rows" class="table table-bordered">
<table>
<button type="button" onclick="AddNew()">Add new tr</button>