Html - Clicking a Button to Obtain Table Cell Value

Get value of table cell by button click

The problem is the context this which is not the clicked button.

Adopt the Event delegation approach for elements dynamically created:

$('#cities').on('click', 'button.btn', function() {...}

$("#cities").empty();var list = [{  Id: 11,  Name: "Name",  RegionName: "RegionName"}];
for (var i = 0; i <= list.length - 1; i++) {  var tableData = '<tr>' + '<td>' +    (i + 1) +    '</td>' +    '<td class="cityId" style="display:none">' +    list[i].Id +    '</td>' +    '<td > ' +    list[i].Name +    '</td>' +    '<td > ' +    list[i].RegionName +    '</td>' +    '<td> ' +    '<button type="button" class="btn btn-info">' + 'Удалить' + '</button>' +    '</td>' +    '</tr>';  $('#cities').append(tableData);}
$('#cities').on('click', 'button.btn', function() {  let id = $(this).closest('tr').find('.cityId').text();  console.log(id)});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table class="table">  <thead>    <tr>      <th scope="col">#</th>      <th scope="col">Город</th>      <th scope="col">Регион</th>
    </tr>  </thead>  <tbody id="cities" style="overflow: auto;"></tbody>

Getting table cell elements from a button click with Javascript

You need to pass the clicked button reference to runPop then use that to get the reference to the tr element and using that you can you can get the first tr

<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop(this);"></td>

then

function runPop(el) {
    var report = el.parentNode.parentNode.cells[0].innerHTML;
    var pop = new myPop();
    pop.popOut(report);
    console.log(report);
}

Get the value of the next table cell onclick javascript

You can use nextElementSibling

document.getElementById('table1').onclick = function(event){
  //REM: Target
  var tElement = event.target;

  if(
    //REM: Only cells (=<td>)
    tElement.tagName === 'TD' &&
    
    //REM: Only first column cells
    tElement.parentNode.firstElementChild === tElement
  ){ 
    //REM: Next Elementsibling of Target or Null
    var tNext = tElement.nextElementSibling;
      
    if(tNext){
      console.log('TD: ', tElement.textContent);
      console.log('Next: ', tElement.nextElementSibling.textContent)
    }
  }
}

table, td{
  border: 1px solid black
}

<table id = 'table1'>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

How to get select text, table cell value when a button is clicked

Include jQuery at the top of your html code

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then at the bottom of your code add this code:

<script>
  $("input[type=button]").on("click", function(){ 
  var FIRSTNAME  = ($(this).parent().prev().prev()).html(); 
  //alert(FIRSTNAME);
  var   NEWSURNAME  = ($(this).parent().prev().children().attr("selected", "selected")).val(); 
  //alert(NEWSURNAME);
  $.post("/MyController/MyAction", { firstName: FIRSTNAME, newSurname: NEWSURNAME } );  
});
</script>

click a button inside html table and get the value on the same row

You can use like this,

$(".btnedit").click(function () {
    var name = $(this).closest("tr").find("td:eq(0)").text();
    $("#Fullname").val(name);
});

Closest("tr") will return the clicked button's parent tr.

Then you can find the child td using its index.

find("td:eq(0)") will return the first td of selected tr. In your case, it will return signatoryname.

Likewise, you can use find("td:eq(1)") & find("td:eq(2)")

Get the values of a single html table row upon onclick of a button inside the row using javascript

You can't get any value from your cells using "getVal" use "innerHTML" as well:

document.getElementById("rid").innerHTML = document.getElementById("detailTable").rows[0].cells[1].innerHTML;