如何在更改后获取 javascript 中完整 <tr> 标记的值？

Question

我在 javascript 中创建了一个 table，带有 3 个输入标签

item_name,
item_value 和
数量。

关于更改数量输入标签，我想获取该特定行中所有 3 个输入标签的值来计算数量。如何获取<tr>的完整数据？

这是我的 table,

var tr = document.createElement("tr");
var td = document.createElement("td");

let key = entry[0];
let value = entry[1];

const item_name = document.createElement("input");
item_name.setAttribute("id", "item_name[]");
item_name.setAttribute("name", "item_name[]");
item_name.setAttribute("readonly", "readonly");
item_name.value = key;

td.appendChild(item_name);
tr.appendChild(td);
//$('#receipt_details').append(item_name);


const item_value = document.createElement("input");
item_value.setAttribute("id", "item_value[]");
item_value.setAttribute("name", "item_value[]");
item_value.setAttribute("readonly", "readonly");
item_value.value = value.amount;
//$('#receipt_details').append(item_value);
td.appendChild(item_value);
tr.appendChild(td);

const quantity = document.createElement("input");
quantity.setAttribute("id", "quantity[]");
quantity.setAttribute("name", "quantity[]");
quantity.value = 1;
//$('#receipt_details').append(quantity);

td.appendChild(quantity);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
$('#receipt_details').append(table);

const total_column = document.createElement("input");
total_column.setAttribute("id", "total_cost[]");
total_column.setAttribute("name", "total_cost[]");
                
total_column.value = Number(value.amount) * 1;
                
td.appendChild(total_column);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="receipt_details"></div>

Answer 1

var value = $('tr').text();

如果您可以将 id 或 class 提供给 tr 那么它就像 ( ) 那么它就像

var value = $('#tablerow').text();

Answer 2

你可以这样取fiddle

quantity.onchange = function(e) {
  var row = {};
    $(e.target).closest('tr').find("input:text").each(function() {
    row[$(this).attr("name")] = $(this).val();
  });
  console.log(row);
}

Answer 3

您可以尝试使用 input 事件，如下所示：

var tr = document.createElement("tr");
var td = document.createElement("td");

let key = 'some key';
let value = {amount:'100'};

const item_name = document.createElement("input");
item_name.setAttribute("id", "item_name[]");
item_name.setAttribute("name", "item_name[]");
item_name.setAttribute("readonly", "readonly");
item_name.value = key;

td.appendChild(item_name);
tr.appendChild(td);
//$('#receipt_details').append(item_name);


const item_value = document.createElement("input");
item_value.setAttribute("id", "item_value[]");
item_value.setAttribute("name", "item_value[]");
item_value.setAttribute("readonly", "readonly");
item_value.value = value.amount;
//$('#receipt_details').append(item_value);
td.appendChild(item_value);

const quantity = document.createElement("input");
quantity.setAttribute("id", "quantity[]");
quantity.setAttribute("name", "quantity[]");
quantity.value = 1;

const total_column = document.createElement("input");
total_column.setAttribute("id", "total_cost[]");
total_column.setAttribute("name", "total_cost[]");
                
total_column.value = Number(value.amount) * 1;               
td.appendChild(total_column);
tr.appendChild(td);

td.appendChild(quantity);
tr.appendChild(td);
const tbody = document.createElement("tbody");
tbody.appendChild(tr);
const table = document.createElement("table");
table.appendChild(tbody);
$('#receipt_details').append(table);

$('table input').on('input', function(){
  var parent = $(this).closest('tr');
  var value = parent.find('[name="item_value[]"]').val();
  var amount = parent.find('[name="quantity[]"]').val();
  var total_cost = value * amount;
  parent.find('[name="total_cost[]"]').val(total_cost);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="receipt_details"></div>

如何在更改后获取 javascript 中完整 <tr> 标记的值？

How to get values of a full <tr> tag in javascript after on change?

javascript

html-table

onchange