如何只用jquery将行传递给其他表？
我正在学习JavaScript，我想要从表到其他表的传递行：
将行从表传递到其他表而不重复相同的行。 我怎么样？
我有这个：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
2 个答案:
答案 0 :(得分：1)
您基本上需要创建一个伪类，以按产品ID标识行。在我的例子中，我只是命名它，例如“copy_1”。然后，您可以检查第二个表中是否已存在该ID。我还补充说，输入字段将增加以添加一个产品。如果您不想这样，只需删除else语句。
附注：使用“on”方法，您可以声明一个全局侦听器，该侦听器也适用于动态生成的元素。您也可以将它用于删除按钮，并且当有人添加产品时，无需每次都重新声明它。我也在我的代码中更改了这个。有关它的更多信息，请参阅此帖子：Jquery adding event listeners to dynamically added elements
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
// check if the row already exists in the 2nd table
// if no, add the line to the 2nd table
// if yes, add one product to the input field
if($("#second_table .copy_"+column1).length == 0)
{
$("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
}
else
{
var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1;
$("#second_table .copy_"+column1+" input").val(value);
}
});
$("body").on("click",".btn_remove", function() {
$(this).parent().parent().remove();
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
答案 1 :(得分：0)
看起来你只是错过了第二个表中input事件的事件处理程序。由于内容是动态添加的，因此您需要使用event delegation。
以下代码可以解决这个问题：
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
下面有一个正在运行的代码段。当您更改第二个表格中的输入时，您会看到价格实时计算。
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
$("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
$(".btn_remove").click(function() {
$(this).parent().parent().remove();
});
});
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？