英文:
is there way to connect the two added tr in different table?
问题
以下是代码的部分翻译：
// 定义变量
var $item = $('input[name="Item"]');
var item = $("input[name^='Item']");
var $quantity = $('input[name="Quantity"]');
var $desc = $('input[name="Description"]');
var $item2 = $('input[name="Item2"]');
var item2 = $("input[name^='Item2']");
var $qtyent = $('input[name="Qtyent"]');
var $qtyext = $('input[name="Qtyext"]');
var $balqty = $('input[name="Balanceqty"]');
var $DOT = $('input[name="DatenTime"]');
var $input = $('[name="Item2"],[name="Qtyent"],[name="Qtyext"],[name="Balanceqty"],[name="Guard"],[name="DatenTime"]');
var itemarray, item2array;
var seconditemarray;
// 监听第一个表格中的输入变化
$(document).on('change', "tbody.tbody td input.firsttable", function() {
itemarray = [];
item2array = [];
$(".tbody tr").each(function(i, v) {
itemarray[i] = $(this).find('input.firsttable').get().map(function(input) {
$item2.val($item.val());
$balqty.val($quantity.val());
$qtyent.val($quantity.val());
return input.value;
});
});
$(".tablebody tr").each(function(j, k) {
item2array[j] = $(this).find('input.secondtable').get().map(function(input) {
return input.value;
});
});
console.log(itemarray, item2array);
});
// 监听添加按钮点击事件
$(document).on('click', '.item-add-onclick', function() {
var cols = "";
var col = "";
cols += `<tr><td>
<input type="text" name="Item" class="firsttable" value required>
</td>
<td>
<input type="number" name="Quantity" class="firsttable" value required>
</td>
<td>
<input type="text" name="Description" class="firsttable" value required>
</td></tr>`;
$('.tbody').append(cols);
col += `<tr class="tablerow">
<td>
<input type="text" name="Item2" class="secondtable" id="item2" value disabled>
</td>
<td>
<input type="number" name="Qtyent" class="secondtable" id="qtyent" value disabled>
</td>
<td>
<input type="text" name="Qtyext" class="secondtable" id="qtyext" value required>
</td>
<td>
<input type="number" name="Balanceqty" class="secondtable" id="blnqty" min="0" value readonly>
</td>
<td>
<input type="text" name="Guard" class="secondtable" id="GoD" value required>
</td>
<td>
<input type="datetime-local" name="DatenTime" class="secondtable" id="DoT" value required>
</td>
</tr>`;
$('.tablebody').append(col);
});
这是代码的一部分翻译，包括变量定义以及事件监听的部分。
英文:
The problem of the code is I don't know a way to make the added tr same as the original tr that insert the value of the ITEM and QUANTITY into another table using the val() method.
the first table is the primary table where I inputted the value, and the second table is the secondary table were getting some of the value on the first table.
sample
firsttable
item quantity description
| apple | 1 | Sweet |
| orange | 1 | Sweet |
second table
|--item--|Quantity ety | Quantity ext | Balance qty | guard | Datetime
|--apple--|------1------|---------------|--------1----|--------|-----------|
|--orange--|------1------|---------------|------1------|--------|-----------|
i want this program like this
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var $item = $('input[name ="Item"]')
var item = $("input[name^='Item']")
var $quantity = $('input[name ="Quantity"]')
var $desc = $('input[name ="Description"]')
var $item2 = $('input[name ="Item2"]')
var item2 = $("input[name^='Item2']")
var $qtyent = $('input[name ="Qtyent"]')
var $qtyext = $('input[name ="Qtyext"]')
var $balqty = $('input[name ="Balanceqty"]')
var $DOT = $('input[name ="DatenTime"]')
var $input = $('[name ="Item2"],[name ="Qtyent"],[name ="Qtyext"],[name ="Balanceqty"],[name="Guard"],[name="DatenTime"]')
var itemarray, item2array;
var seconditemarray;
$(document).on('change', "tbody.tbody td input.firsttable", function() {
itemarray = [];
item2array = [];
$(".tbody tr").each(function(i, v) {
itemarray[i] = $(this).find('input.firsttable').get()
.map(function(input) {
$item2.val($item.val())
$balqty.val($quantity.val())
$qtyent.val($quantity.val())
return input.value
});
});
$(".tablebody tr").each(function(j, k) {
item2array[j] = $(this).find('input.secondtable').get()
.map(function(input) {
return input.value
});
});
console.log(itemarray, item2array)
})
$(document).on('click', '.item-add-onclick', function() {
var cols = "";
var col = "";
cols += `<tr><td>
<input type="text" name="Item" class="firsttable" value required>
</td>
<td>
<input type="number" name="Quantity" class="firsttable" value required>
</td>
<td>
<input type="text" name="Description" class="firsttable" value required>
</td></tr>`;
$('.tbody').append(cols);
col += `<tr class="tablerow">
<td>
<input type="text" name="Item2" class="secondtable" id="item2" value disabled>
</td>
<td>
<input type="number" name="Qtyent" class="secondtable" id="qtyent" value disabled>
</td>
<td>
<input type="text" name="Qtyext" class="secondtable" id="qtyext" value required>
</td>
<td>
<input type="number" name="Balanceqty" class="secondtable" id="blnqty" min="0" value readonly>
</td>
<td>
<input type="text" name="Guard" class="secondtable" id="GoD" value required>
</td>
<td>
<input type="datetime-local" name="DatenTime" class="secondtable" id="DoT" value required>
</td>
</tr>`
$('.tablebody').append(col)
})
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<table>
<thead>
<tr>
<td>Item</td>
<td>Quantity</td>
<td>Description</td>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>
<input type="text" name="Item" class="firsttable" id="item" value required>
</td>
<td>
<input type="number" name="Quantity" class="firsttable" id="quantity" value required>
</td>
<td>
<input type="text" name="Description" class="firsttable" id=desc value required>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="btn btn-primary item-add-onclick" id="addrow">Add</button>
</td>
</tr>
</tfoot>
</table>
<Table>
<thead>
<tr>
<td>Item</td>
<td>Qty Enter</td>
<td>Qty Exit</td>
<td>Balance Qty</td>
<td>Guard On Duty</td>
<td>Date and Time</td>
</tr>
</thead>
<tbody class="tablebody">
<tr class="tablerow">
<td>
<input type="text" name="Item2" class="secondtable" id="item2" value disabled>
</td>
<td>
<input type="number" name="Qtyent" class="secondtable" id="qtyent" value disabled>
</td>
<td>
<input type="text" name="Qtyext" class="secondtable" id="qtyext" value required>
</td>
<td>
<input type="number" name="Balanceqty" class="secondtable" id="blnqty" min="0" value readonly>
</td>
<td>
<input type="text" name="Guard" class="secondtable" id="GoD" value required>
</td>
<td>
<input type="datetime-local" name="DatenTime" class="secondtable" id="DoT" value required>
</td>
</tr>
</tbody>
</Table>
</body>
<script src="table.js">
</script>
</html>
<!-- end snippet -->
答案1
得分: 0
首先，我想使用一个模板库，以避免在我们的JavaScript中包含所有HTML标记。我将选择Handlebars。
我们将创建两个Handlebars模板：一个用于每个模板的行：
<script id="Table1RowTemplate" type="text/template">
<tr>
{{!-- Table 1 Row markup goes here --}}
</tr>
</script>
<script id="Table2RowTemplate" type="text/template">
<tr>
{{!-- Table 2 Row markup goes here --}}
</tr>
</script>
在Table2模板中，我们将在输入元素上使用属性[data-ref]，以便我们知道它与Table1中的哪个输入元素相连。例如，在Table1中，input[name="Item"]将链接到Table2中的input[data-ref="Item"]。
现在我们有了这些模板，我们将从我们的表格中移除标记。我们将使用JavaScript在页面加载时填充这些表格，使用我们刚刚定义的模板。
两个表格中的<tbody></tbody>元素现在将是空的。
我们还将为每个表格分配一个ID以便于引用。我们将使用"Table1"和"Table2"。
在我们的JavaScript中，我们将定义一个函数来将行添加到我们的表格：
const table1RowTemplate = Handlebars.compile(document.getElementById('Table1RowTemplate').innerHTML);
const table2RowTemplate = Handlebars.compile(document.getElementById('Table2RowTemplate').innerHTML);
const appendRows = () => {
$('#Table1 tbody').append(table1RowTemplate());
$('#Table2 tbody').append(table2RowTemplate());
};
我们可以调用这个函数来用它们的第一行填充我们的表格：appendRows();。
我们还将使用这个函数作为.item-add-onclick按钮的点击处理程序，以便点击按钮将向每个表格添加一行：
$('.item-add-onclick').on('click', appendRows);
最后是change事件处理程序：
// 监听#Table1中输入的更改
$('#Table1').on('change', 'input', function () {
// 获取发生更改的输入
const $this = $(this);
// 获取输入的名称
const name = $this.attr('name');
// 获取输入的新值
const value = $this.val();
// 获取输入的行索引
const index = $('#Table1').find(`input[name="${name}"]`).index($this);
// 获取#Table2中与索引对应的行
const row = $('#Table2 tbody tr').get(index);
// 我们使用属性`data-ref`将Table2中的输入与Table1中的输入链接在一起 - Table1中的`[name]`对应于Table2中的`[data-ref]`
// 因此，我们可以轻松地找到配对并更新其值
$(row).find(`input[data-ref="${name}"]`).val(value);
});
这里是一个fiddle供参考。
英文:
First, I would like to use a templating library so as to avoid including all of that HTML markup in our JavaScript. I will go with Handlebars.
We will create two Handlebars templates: a row for each of our templates:
<script id="Table1RowTemplate" type="text/template">
<tr>
{{!-- Table 1 Row markup goes here --}}
</tr>
</script>
<script id="Table2RowTemplate" type="text/template">
<tr>
{{!-- Table 2 Row markup goes here --}}
</tr>
</script>
In the Table2 template, we will use an attribute, [data-ref], on the input so that we know which input in Table1 it is linked to. For example input[name="Item"] in Table1 will be linked to input[data-ref="Item"] in Table2.
Now that we have these templates, we will remove the markup from our tables. We will use JavaScript to populate these tables on page load, using the templates we just defined.
The <tbody></tbody> elements in both tables will now be empty.
We will also give each table an ID for easy reference. We will go with "Table1" and "Table2".
In our JavaScript, we will define a function to append rows to our tables:
const table1RowTemplate = Handlebars.compile(document.getElementById('Table1RowTemplate').innerHTML);
const table2RowTemplate = Handlebars.compile(document.getElementById('Table2RowTemplate').innerHTML);
const appendRows = () => {
$('#Table1 tbody').append(table1RowTemplate());
$('#Table2 tbody').append(table2RowTemplate());
};
And we can invoke this function to populate our tables with their first rows: appendRows();.
We will also use this function as the handler for a click of our .item-add-onclick button, so that clicking the button will add a row to each table:
$('.item-add-onclick').on('click', appendRows);
And finally the change handler:
// listen to input changes in #Table1
$('#Table1').on('change', 'input', function () {
// get the input that was changed
const $this = $(this);
// get the name of the input
const name = $this.attr('name');
// get the new value of the input
const value = $this.val();
// get the index of the row of the input
const index = $('#Table1').find(`input[name="${name}"]`).index($this);
// get the corresponding row in #Table2 with the index
const row = $('#Table2 tbody tr').get(index);
// we have used an attribute, `data-ref`, to link the inputs in
// Table2 to their partners in Table1 - the `[name]` in Table1
// corresponds to the `[data-ref]` in Table2
// so we can easily find the partner and update its value
$(row).find(`input[data-ref="${name}"]`).val(value);
});
And here is a fiddle for reference.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论