get this data of row by click on button which is in row javascript

Question

how to get all data of particular row by clicking in button in row in javascript.. here is my code in code pen.. like i press button on first row, i would get all data of first row my code is..

var response =[
    {
        "ID": 1,
        "Recipe": "recipe1",
        "gt14": "50",
        "gt13": "100",
        "gt11": "450",
        "gt150": "11",
        "gt16": "123"
    },
    {
        "ID": 2,
        "Recipe": "recipe2",
        "gt14": "420",
        "gt13": "1000",
        "gt11": "140",
        "gt150": "110",
        "gt16": "132"
    }
]
   var thead = "";
        var tbody = "";
        var columns = Object.getOwnPropertyNames(response[0]);
        columns.push("Apply", "Current Value");
        for (var i = 0; i < columns.length; i++) {
          thead += "<th scope='col'>" + columns[i] + "</th>";
        }
        $("#recipeTableData thead tr").html(thead);
        for (var i = 0; i < response.length; i++) {
          var objValues = Object.values(response[i]);

          tbody += "<tr>";
          for (var j = 0; j < objValues.length; j++) {
            tbody += "<td scope='col'>" + objValues[j] + "</td>";
          }

          tbody +=
            "<td scope='col'><button onlick='btnApply(" +
            i +
            ")';>Apply</button></td>";
          tbody +=
            "<td scope='col'><button class='btnCurrent';>CurrentValue</button></td>";
          tbody += "</tr>";
        }
        $("#recipeTableData tbody ").html(tbody);

 <table  id="recipeTableData" class="table table-bordered" >
  <thead>
    <tr>


    </tr>
  </thead>
  <tbody></tbody>
</table>

enter link description here

Answer 1

you have a typo in onClick inside button element and you havent defined btnApply function to the code these are two reasons why it was not working take a look at corrected version

var response =[
    {
        "ID": 1,
        "Recipe": "recipe1",
        "gt14": "50",
        "gt13": "100",
        "gt11": "450",
        "gt150": "11",
        "gt16": "123"
    },
    {
        "ID": 2,
        "Recipe": "recipe2",
        "gt14": "420",
        "gt13": "1000",
        "gt11": "140",
        "gt150": "110",
        "gt16": "132"
    }
]
   var thead = "";
        var tbody = "";
        var columns = Object.getOwnPropertyNames(response[0]);
        columns.push("Apply", "Current Value");
        for (var i = 0; i < columns.length; i++) {
          thead += "<th scope='col'>" + columns[i] + "</th>";
        }
        $("#recipeTableData thead tr").html(thead);
        for (var i = 0; i < response.length; i++) {
          var objValues = Object.values(response[i]);

          tbody += "<tr>";
          for (var j = 0; j < objValues.length; j++) {
            tbody += "<td scope='col'>" + objValues[j] + "</td>";
          }

          tbody +=
            "<td scope='col'><button onClick='btnApply("+i+")';>Apply</button></td>";
          tbody +=
            "<td scope='col'><button class='btnCurrent';>CurrentValue</button></td>";
          tbody += "</tr>";
        }
        $("#recipeTableData tbody").html(tbody);

        function btnApply(index){
            var row = response[index]
            console.log(row)
        }

 <table  id="recipeTableData" class="table table-bordered" >
  <thead>
    <tr>


    </tr>
  </thead>
  <tbody></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>