如何将表格行值放入 JavaScript 中的文本字段中......？答案

【问题标题】：How to get table row value into text field in JavaScript..?如何将表格行值放入 JavaScript 中的文本字段中......？
【发布时间】：2021-06-09 23:45:38
【问题描述】：

我使用此代码创建一个表，

 <table class="table table-green table-hover" id="tblk"></table>

当我将数据添加到表中时，我使用此 JavaScrip 函数（用于按钮）添加行，

function addRow() {
  var custid = document.getElementById('InputCusomerID').value
  var custname = document.getElementById('InputCusomerName').value
  var itemid = document.getElementById('InputItemID').value
  var table = document.getElementById('tblk')
  var row = table.insertRow(0)
  var cell1 = row.insertCell(0)
  var cell2 = row.insertCell(1)
  var cell3 = row.insertCell(2)
  cell1.innerHTML = custid
  cell2.innerHTML = custname
  cell3.innerHTML = itemid
}

当我单击表格行时，我需要在输入文本字段中获取表格行值

这是我的 JavaScrip 函数，用于将表行值放入我的文本字段中......，

var table = document.getElementById('tblk'),
  rIndex
for (var i = 1; i < table.rows.length; i++) {
  table.rows[i].onclick = function () {
    document.getElementById('InputCusomerID').value = this.cells[0].innerHTML
    document.getElementById('InputCusomerName').value = this.cells[1].innerHTML
    document.getElementById('InputItemID').value = this.cells[2].innerHTML
}
}

但我的代码不起作用我无法将表格行值放入我的文本字段。你能帮我解决这个问题吗..？非常感谢..！

function addRow() {
  var custid = document.getElementById('InputCusomerID').value
  var custname = document.getElementById('InputCusomerName').value
  var itemid = document.getElementById('InputItemID').value
  var table = document.getElementById('tblk')
  var row = table.insertRow(0)
  var cell1 = row.insertCell(0)
  var cell2 = row.insertCell(1)
  var cell3 = row.insertCell(2)
  cell1.innerHTML = custid
  cell2.innerHTML = custname
  cell3.innerHTML = itemid
}

var table = document.getElementById('tblk'),
  rIndex
for (var i = 1; i < table.rows.length; i++) {
  table.rows[i].onclick = function() {
    document.getElementById('InputCusomerID').value = this.cells[0].innerHTML
    document.getElementById('InputCusomerName').value = this.cells[1].innerHTML
    document.getElementById('InputItemID').value = this.cells[2].innerHTML
  }
}

&lt;table class="table table-green table-hover" id="tblk"&gt;&lt;/table&gt;

【问题讨论】：

console.log(this) 作为 onclick 事件处理程序中的第一件事。查看它在控制台中打印的内容
也可以把它变成minimal reproducible example 对读者很有帮助。
script.js:119 Uncaught TypeError: Cannot read property '0' of undefined
你不会从控制台日志中得到那个错误，但是，嘿，你现在看到一个你需要解决的错误。
我用你的代码制作了 sn-p，修复了 ti 以制作 minimal reproducible example，可运行的 sn-p 解决了你的问题。

标签： javascript html jquery

【解决方案1】：

我不确切知道您要做什么，但它不起作用，因为您的点击侦听器在您的表格被填充之前被调用。查看我的代码。

function addRow() {
  var custid = document.getElementById('InputCusomerID').value
  var custname = document.getElementById('InputCusomerName').value
  var itemid = document.getElementById('InputItemID').value
  var table = document.getElementById('tblk')
  var row = table.insertRow(0)
  var cell1 = row.insertCell(0)
  var cell2 = row.insertCell(1)
  var cell3 = row.insertCell(2)
  cell1.innerHTML = custid
  cell2.innerHTML = custname
  cell3.innerHTML = itemid
  
  setListeners();
}

var table = document.getElementById('tblk'),
  rIndex;
  
function setListeners() {
  for (var i = 0; i < table.rows.length; i++) {
  table.rows[i].addEventListener('click', function (e) {
    console.log(e.target);
    document.getElementById('InputCusomerID').value = "result: " + this.cells[0].innerHTML
    document.getElementById('InputCusomerName').value = "result: " + this.cells[1].innerHTML
    document.getElementById('InputItemID').value = "result: " + this.cells[2].innerHTML
  });
}
}


addRow();

<input type="text" id="InputCusomerID" value="a" />
<input type="text" id="InputCusomerName" value="b" />
<input type="text" id="InputItemID" value="c" />

<table class="table table-green table-hover" id="tblk"></table>

【讨论】：

它的工作..非常感谢您，先生..！