Question 237556 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to take a table row's coloumn to form input field

I have a table of data. First column of table is button; on the button there is a onclick event. One other column is firmName I want to set txtFirm name field of form section the selected row’s firm Name column.

My javaScript is as follows, but it does not work as expected

function callme(e) {
  var tds = e.getElementsByTagName('td');
  document.getElementById("txtFirmaAdi").value = tds[1].innerHTML.trim();
}
<table id="ctl03_ucOzgecmisTecrube_ctlGridSgkTecrube">
  <tbody>
    <tr>
      <th>İşyeri Sicil No</th>
      <th>İşyeri Adı</th>
      <th>Meslek Kodu</th>
      <th>Meslek</th>
      <th>Süre</th>
      <th>Baş Tar</th>
      <th>Bit Tar</th>
    </tr>
    <tr>
      <td><input type="submit" name="ctl03$ucOzgecmisTecrube$ctlGridSgkTecrube$ctl02$btnAktar" value="Aktar" onclick="return callme(this);" id="ctl03_ucOzgecmisTecrube_ctlGridSgkTecrube_ctl02_btnAktar" class="inp"></td>
      <td>43821010110221190210174</td>
      <td>GELİŞİM TEM.İNŞ.GIDA TEL.SAN.TİC.LTD.ŞTİ.</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>240</td>
      <td>&nbsp;</td>
      <td>31.12.2004</td>
    </tr>
  </tbody>
</table>
Tags:

2

Answers


  1. 0

    The JavaScript code you provided is on the right track, but the issue might be with the indexing of the td elements. It seems like you’re trying to access the firm name from the second column (tds[1]), but your comment indicates that the firm name is in the third column.

    function callme(e) {
 var tds = e.parentNode.parentNode.getElementsByTagName('td'); // Get the 
                                     parent row's td elements

// The index might need to be adjusted based on the actual column position

 var firmName = tds[2].innerHTML.trim(); // Use tds[2] for the firm name 
                                          column

document.getElementById("txtFirmaAdi").value = firmName;
       }

    Explanation:

    e represents the button element that was clicked, so we use e.parentNode.parentNode to move up to the parent tr element containing the row’s td elements.

    tds[2] corresponds to the third column (firm name) within the row.

    Retrieve the innerHTML of the td element and trim any extra whitespace.

    Make sure to adjust the index (tds[2]) if the firm name is in a different column. This code should populate the txtFirmaAdi field in your form with the selected row’s firm name when the "Aktar" button is clicked.

    Login or Signup to reply.
  2. 0

    You are passing the button to the function.

    Use .closest to find the parent

    function callme(button) {
  const number = button.closest("tr").querySelectorAll("td")[1].textContent.trim()
  document.getElementById("txtFirmaAdi").value = number;
}
    <table id="ctl03_ucOzgecmisTecrube_ctlGridSgkTecrube">
  <tbody>
    <tr>
      <th>İşyeri Sicil No</th>
      <th>İşyeri Adı</th>
      <th>Meslek Kodu</th>
      <th>Meslek</th>
      <th>Süre</th>
      <th>Baş Tar</th>
      <th>Bit Tar</th>
    </tr>
    <tr>
      <td><input type="submit" name="ctl03$ucOzgecmisTecrube$ctlGridSgkTecrube$ctl02$btnAktar" value="Aktar" onclick="return callme(this);" id="ctl03_ucOzgecmisTecrube_ctlGridSgkTecrube_ctl02_btnAktar" class="inp"></td>
      <td>43821010110221190210174</td>
      <td>GELİŞİM TEM.İNŞ.GIDA TEL.SAN.TİC.LTD.ŞTİ.</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>240</td>
      <td>&nbsp;</td>
      <td>31.12.2004</td>
    </tr>
  </tbody>
</table>
<input type="text" id="txtFirmaAdi" value="" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search