Как получить значения полного тега <tr>в JavaScript после изменения? - PullRequest
Новая
       16

Как получить значения полного тега <tr>в JavaScript после изменения?

0 голосов
/ 11 июня 2019

Я создал таблицу внутри javascript, с 3 входными тегами

  • item_name,
  • item_value и
  • количество.

При вводе тега количества изменений я хочу получить значения всех 3 входных тегов в этой конкретной строке для вычисления количества. Как получить полные данные <tr>?

Это мой стол, 

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>

Ответы [ 3 ]

1 голос
/ 11 июня 2019

Вы можете попробовать использовать событие 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>
0 голосов
/ 11 июня 2019

вы можете получить это так скрипка 

quantity.onchange = function(e) {
  var row = {};
    $(e.target).closest('tr').find("input:text").each(function() {
    row[$(this).attr("name")] = $(this).val();
  });
  console.log(row);
}
0 голосов
/ 11 июня 2019 
var value = $('tr').text();

если вы можете дать идентификатор или класс для tr, тогда это будет похоже на e.g (), тогда это будет похоже на 

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