How to replace row data in a table with row data from another table

Question

I am trying to replace the highlighted data in table A with the data in table B.

I will show you the output must be.

Sample Output. I want to replace the *Large Fries with * 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 :

<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

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 . 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. When we click on tableB td , it will fire and event. On click event, i have get the closest() tr html and stored html in a variable called tableBhtml . Then i have emptied the tableA selected TR and added tableBhtml into #tableA tr.selected row