複選框勾選Jquery/Javascript問題添加從一個表到另一個表的行與輸入框操縱

Question

我有一個左邊的發言表，它有四列。我在右邊有另一張桌子，我想要在第一列顯示兩列。 所有我能夠實現的是添加整個新行，因爲我想要在列中格式化的列。我知道我必須追加HTML使用jQuery，但無法找到一種方法。

HTML代碼如下左表：

<table class="table table-hover" id="tbl1"> 
        <thead> 
        <tr> 
         <th>Items</th> 
         <th>Quantity/Calories</th> 
         <th>Portion</th> 
         <th>Approx. Callories</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr data-index="1"> 
         <td><input type="checkbox" class="chkclass"><span> Apple</span></td> 
         <td>1 medium/65cal</td> 
         <td><input type="text" ng-model="qty"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
        <tr data-index="1"> 
        <td><input type="checkbox" class="chkclass"><span> Banana</span></td> 
         <td>1 medium/90cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr data-index="1"> 
        <tr> 
        <td><input type="checkbox" class="chkclass"><span> Grapes</span></td> 
         <td>30Nos./70cal</td> 
         <td><input type="text" ng-model="qty"> g </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" class="chkclass"><span> Guava</span></td> 
         <td>1 medium/50cal</td> 
         <td><input type="text"> g </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" class="chkclass"><span> Jackfruit</span></td> 
         <td>4 pieces/90cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Mango</span></td> 
         <td>1 medium/180cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Mosambi/orange</span></td> 
         <td>1 medium/40cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Papaya</span></td> 
         <td>1 piece/80cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Pineapple</span></td> 
         <td>1 piece/50cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Sapota</span></td> 
         <td>1 medium/80cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Watermelon/muskmelon</span></td> 
         <td>1 slice/15cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 
         <tr> 
        <td><input type="checkbox"><span> Custard apple</span></td> 
         <td>1 medium/130cal</td> 
         <td><input type="text"> Nos. </td> 
         <td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td> 
        </tr> 



        </tbody> 

右表的html代碼：

 <table class="table rt-table rt-table-border" id="tbl2"> 
     <thead style="background-color: #dff0d8"> 
      <tr> 

       <th style="line-height: 11px !important;">Name</th> 
       <th style="line-height: 11px !important;">Portion</th> 
       <th style="line-height: 11px !important;">Calorie</th> 
      </tr> 
     </thead> 
     <tbody id=""> 


     </tbody> 
    </table> 

和腳本

 $(window).load(function(){ 
    $("#tbl1 input:checkbox.chkclass").click(function(){ 
//var fs=$(this).parent('div') 
// var span = $('span [for="'+this.id+'"]',fs) 

    if ($(this).is(":checked")) 

    { 
    $(this).closest("tr").clone().appendTo("#tbl2"); 

/* 
$('#tbl2').append('<tr data-for="' 
         +span.text() 
         +'"><td>' 
         +span.text() 
         +'</td><td>' 
         +$(this).attr('value') 
         +'</td></tr>'); 

*/ 


    } 
    else 
    { 
     var index = $(this).closest("tr").attr("data-index"); 
     var findRow = $("#tbl2 tr[data-index='" + index + "']"); 
     findRow.remove(); 
    } 
    }); 
}); 

註釋代碼給我不確定的和未評論代碼給整行。

我知道這個問題很長，需要給出一個描述性的想法。

Answer 1

我爲你創建了一個jsfiddle，希望它適合你。 click here

您可以使用下面的代碼：

$("#tbl1 input:checkbox.chkclass").click(function(){ 
    var html = ''; 
    if ($(this).is(":checked")) { 
    $(this).next().clone().appendTo("#tbl2"); 
    $(this).parent().next().next().clone().appendTo("#tbl2"); 
    $(this).parent().next().next().next().clone().appendTo("#tbl2"); 
    } else { 
    var index = $(this).closest("tr").attr("data-index"); 
    var findRow = $("#tbl2 tr[data-index='" + index + "']"); 
    findRow.remove(); 
    } 
}); 

注：還有其他的候補了。