如何将表格行的列形成输入字段

Question

我有一个数据表。表格第一列是按钮；按钮上有一个 onclick 事件。另一列是公司名称，我想将表单部分的 txtFirm 名称字段设置为所选行的公司名称列。

我的javaScript如下，但它没有按预期工作

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>

Answer 1

您提供的 JavaScript 代码是正确的，但问题可能出在 td 元素的索引上。您似乎正在尝试从第二列 (tds[1]) 访问公司名称，但您的评论表明公司名称位于第三列中。

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

说明：

e 表示被单击的按钮元素，因此我们使用 e.parentNode.parentNode 向上移动到包含该行 td 元素的父 tr 元素。

tds[2] 对应于该行中的第三列（公司名称）。

检索 td 元素的innerHTML并修剪任何多余的空格。

如果公司名称位于不同的列中，请确保调整索引 (tds[2])。单击“Aktar”按钮时，此代码应使用所选行的公司名称填充表单中的 txtFirmaAdi 字段。

Answer 2

您正在将按钮传递给该函数。

使用 .closest 查找父级

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="" />