[英]How to replace row data in a table with row data from another table
I am trying to replace the highlighted data in table A with the data in table B. 我正在尝试用表B中的数据替换表A中突出显示的数据。
I will show you the output must be. 我将告诉您输出必须是。
Sample Output. 样本输出。 I want to replace the *Large Fries with * DRNKS UPSL
我想用* DRNKS UPSL代替*大薯条
This is my code for highlighting the table row 这是我突出显示表格行的代码
$('#chainingBuild').on('click', '.clickable-row', function(event) {
$('#chainingBuild tr').removeClass('selected');
$(this).addClass('selected');
$('#condimentsBuilderModal').modal('show');
});
My Table B html
: 我的表B
html
:
<table class="table table-striped table-bordered first_render" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead style="">
<tr style="font-size:16px;">
<th>Noun Screen Name</th>
<th>Noun Price</th>
<th>Noun Image</th>
<th style="display:none;"></th>
</tr>
</thead>
</div>
<tbody>
@foreach($noun_table as $noun_data)
<tr id="nounClicked">
<td class="nounScreenNameClicked">{{$noun_data->menu_cat_screen_name}}</td>
<td>{{$noun_data->menu_cat_price}}</td>
<td class="nounScreenID" style="display:none;">{{$noun_data->menu_cat_id}}</td>
@if($noun_data->menu_cat_image == '')
<td></td>
@else
<td><img src="{{url('/storage/'.$noun_data->menu_cat_image.'')}}" style="height:110px; width:140px;" class="img-fluid"></td>
@endif
</tr>
@endforeach
</tbody>
</table>
See below snippet 见下面的片段
$("#tableB td").click( function(e){ var tableBhtml = $(this).closest('tr').html(); // console.log(tableBhtml); $("#tableA tr.selected").html(''); $("#tableA tr.selected").html(tableBhtml) } );
table, table td{ border: 1px solid #ccc; } table td{ padding: 5px; } table tr:hover{ background: #f1f1f1; } table tr.selected{ background: blue; color: #fff; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <b> TABLE A </b> <table id="tableA"> <tr> <td> Col 11 A </td> <td> Col 12 A </td> <td> Col 13 A</td> </tr> <tr> <td> Col 21 A </td> <td> Col 22 A </td> <td> Col 23 A</td> </tr> <tr class="selected"> <td> Col 31 A </td> <td> Col 32 A </td> <td> Col 33 A</td> </tr> </table> <b> TABLE B </b> <table id="tableB"> <tr> <td> Col 11 B </td> <td> Col 12 B </td> <td> Col 13 B </td> </tr> <tr> <td> Col 21 B </td> <td> Col 22 B </td> <td> Col 23 B </td> </tr> <tr> <td> Col 31 B </td> <td> Col 32 B </td> <td> Col 33 B </td> </tr> </table>
Explanation: 说明:
I have created two tables with ID tableA
and tableB
in table we have a table row with class selected
. 我在表中创建了两个ID为
tableA
和tableB
的表,我们有一个selected
了类的表行。 You can place this class on any row as per your requirements and project flow. 您可以根据需要和项目流程将此类放置在任何行上。
Now in JQuery, i have written a code that only works on click event of tableB td
or column. 现在在JQuery中,我编写了仅对
tableB td
或column的click事件起作用的代码。 When we click on tableB td
, it will fire and event. 当我们单击
tableB td
,它将触发并发生事件。 On click event, i have get the closest()
tr html and stored html in a variable called tableBhtml
. 在单击事件上,我已经获取了
closest()
tr html并将html存储在名为tableBhtml
的变量中。 Then i have emptied the tableA selected TR and added tableBhtml
into #tableA tr.selected
row 然后我清空了tableA选择的TR并将
tableBhtml
添加到#tableA tr.selected
行中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.