如何查找动态表的行索引并基于该获取列文本

Question

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

Answer 1

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>