Question

我正在尝试用表B中的数据替换表A中突出显示的数据。

我将向您显示输出必须是。

样本输出。我想用* DRNKS UPSL代替*大薯条

这是我用于突出显示表格行的代码

$('#chainingBuild').on('click', '.clickable-row', function(event) {
          $('#chainingBuild tr').removeClass('selected');
         $(this).addClass('selected');
      $('#condimentsBuilderModal').modal('show');
    });

我的表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>

Answer 1

请参见以下代码段

$("#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>

说明：

我已经创建了两个ID为tableA和tableB的表在表格中，我们有一个类别为selected的表格行。您可以根据需要和项目流程将此类放置在任何行上。

现在在JQuery中，我编写了仅在tableB td或列的click事件上起作用的代码。当我们单击tableB td时，它将触发并发生事件。在点击事件中，我得到了closest() tr html并将HTML存储在名为tableBhtml的变量中。然后，我已清空tableA选择的TR，并将tableBhtml添加到#tableA tr.selected行

如何用另一个表中的行数据替换表中的行数据

1 个答案: