How to take a table row's column to form input field

Question

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>

The `e` you are passing to your function, is the `input` element. Of course you won't find any `td` elements _in_ that button. — CBroe, Aug 24 '23 at 14:21

Levin Baria · Accepted Answer · 2023-08-25T12:36:50.783

The Code have some of the issues, it looks 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;
       }

mplungjan · Answer 2 · 2023-08-25T10:38:37.943

You are passing the button to the function.

Use .closest to find the parent

Firm name in your code is in the 2nd column (according to Google Translate of İşyeri Adı) zero based - so td[1], but you have a very long number there 43821010110221190210174 which seems to match a İşyeri Sicil No

If I add a <th></th> and change to td[2] it makes more sense

function callme(button) {
  const number = button.closest("tr").querySelectorAll("td")[2].textContent.trim(); 
  document.getElementById("txtFirmaAdi").value = number;
}

<table id="ctl03_ucOzgecmisTecrube_ctlGridSgkTecrube">
  <tbody>
    <tr>
      <th>&nbsp;</th>
      <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="" />

How to take a table row's column to form input field

2 Answers2