时间戳

首页 > 解决方案 > 如何将表格行值放入 JavaScript 中的文本字段..？

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

问题描述

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

 <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
  }
}
<table class="table table-green table-hover" id="tblk"></table>

标签： javascripthtmljquery

解决方案

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

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>

推荐阅读