Question

我对附加表的行和表数据有问题，因为在附加值时，该值将推到第一列。

我有两个表，

当我将表行B附加到表行A时看起来像这样，为什么会发生。

这是我将表B附加到表A的代码

    $("#edit_table_chaining_condiments td").click(
  function(e){


     var tableBhtml =  $(this).closest('tr').html();
     // console.log(tableBhtml);


      var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
      var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
      var input = '<input type="number"  id="qty" name="qty" class="form-control" value="1" min="1">';


     $("#editchainingBuild tr.selected").html('');
     $("#editchainingBuild tr.selected").append("<tr><td>"+input+"</td><td>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td></tr>");

  }

这是我的表A：

<table class="table table-hover" id="editchainingBuild">
    <thead>
        <tr style="font-size: 15px;">
            <th scope="col">Qty</th>
            <th scope="col">Condiments</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody style="font-size:14px;">                 

    </tbody>
</table>

表B代码：

<table  class="table table-striped table-bordered second_render" id="edit_table_chaining_condiments" style="width:100%">
    <div class="content-noun" style="text-align: center;">
    <thead>
        <tr style="font-size:18px;">
            <th>Condiment Screen Name</th>
             <th>Condiment Price</th>
             <th>Condiment Image</th>
        </tr>
    </thead>
        </div>
    <tbody>
        @foreach($condiments_table as $condiments_data) 
            <tr class="condimentsClicked">
                <td class="edit_condimentsScreenNameClicked">{{$condiments_data->cat_condi_screen_name}}</td>
                <td class="edit_condimentsScreenPriced">{{$condiments_data->cat_condi_price}}</td>
                @if($condiments_data->cat_condi_image == '')
                <td></td>
                @else
                <td><img src="{{url('/storage/'.$condiments_data->cat_condi_image.'')}}" style="height:120px; width:150px;" class="img-fluid"></td>
                @endif
            </tr>
        @endforeach
    </tbody>
</table>

Answer 1

在TableA上，没有selected类，因此javascript无法识别要附加的正确tr。附加到body也将达到您的目的。

由于您每次都要清除主体，然后追加新创建的表格行，因此您可以使用.html()来完成这两项工作。

建议您不要将input之类的关键字用作变量名。

$("#edit_table_chaining_condiments td").click(function(e){
    //var tableBhtml =  $(this).closest('tr').html();

    var condiments_name = $(this).closest("tr").find(".edit_condimentsScreenNameClicked").text();
    
    var condimentsScreenPriced = $(this).closest("tr").find(".edit_condimentsScreenPriced").text();
    
    var inpt = '<input type="number" id="qty" name="qty" class="form-control" value="1" min="1">';

    //$("#editchainingBuild tbody").html('');
    $("#editchainingBuild tbody").html("<tr><td>"+inpt+"</td><td>"+condiments_name+"</td><td>"+condimentsScreenPriced+"</td></tr>");
    $("#editchainingBuild").show();
});

#editchainingBuild{position:absolute;top:25%;left:15%;display:none;}
#editchainingBuild{background:grey;}

#edit_table_chaining_condiments td{cursor:pointer;}

table{border-collapse: collapse;}

table, th, td {border: 1px solid #aaa;}
th,td{padding:3px 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table class="table table-hover" id="editchainingBuild">
    <thead>
        <tr style="font-size: 15px;">
            <th scope="col">Qty</th>
            <th scope="col">Condiments</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody style="font-size:14px;">	        		
        
    </tbody>
</table>

<table  class="table table-striped table-bordered second_render" id="edit_table_chaining_condiments" style="width:100%">
    <div class="content-noun" style="text-align: center;">
    <thead>
        <tr style="font-size:18px;">
            <th>Condiment Screen Name</th>
             <th>Condiment Price</th>
             <th>Condiment Image</th>
        </tr>
    </thead>
        </div>
    <tbody>
        <tr class="condimentsClicked">
            <td class="edit_condimentsScreenNameClicked">Drinks UPSL</td>
            <td class="edit_condimentsScreenPriced">1.00</td>
            <td></td>
        </tr>
        <tr class="condimentsClicked">
            <td class="edit_condimentsScreenNameClicked">Large Fries</td>
            <td class="edit_condimentsScreenPriced">1.50</td>
            <td></td>
        </tr>
    </tbody>
</table>

如何在选定的表格行中重新排列追加表格行和表格数据

1 个答案: