無法添加帶有jQuery按鈕的文本框

Question

我想在表格> td中添加文本框，其中複選框被選中，但不起作用。我怎樣才能做到這一點？我是jQuery的新手。

這是我的代碼的html：

<table id="list_lab" class="checkbox-inline"> 
<tr> 
    <td><input id="list_lab_0" type="checkbox" name="list_lab$0" checked="checked" value="Electrolyte (Lab)"><label for="list_lab_0">Electrolyte (Lab)</label></td> 
</tr><tr> 
    <td><input id="list_lab_1" type="checkbox" name="list_lab$1" checked="checked" value="Creatinine (plus eGFR)"><label for="list_lab_1">Creatinine (plus eGFR)</label></td> 
</tr><tr> 
    <td><input id="list_lab_2" type="checkbox" name="list_lab$2" value="Blood Urea Nitrogen"><label for="list_lab_2">Blood Urea Nitrogen</label></td> 
</tr><tr> 
    <td><input id="list_lab_3" type="checkbox" name="list_lab$3" value="Complete Blood Count"><label for="list_lab_3">Complete Blood Count</label></td> 
</tr><tr> 
    <td><input id="list_lab_4" type="checkbox" name="list_lab$4" value="Dengue NS1 Ag"><label for="list_lab_4">Dengue NS1 Ag</label></td> 
</tr><tr> 
    <td><input id="list_lab_5" type="checkbox" name="list_lab$5" value="Influenza A/B A/(H1N1) Screening"><label for="list_lab_5">Influenza A/B A/(H1N1) Screening</label></td> 
</tr><tr> 
    <td><input id="list_lab_6" type="checkbox" name="list_lab$6" value="Urine Exam"><label for="list_lab_6">Urine Exam</label></td> 
</tr> 

這是我的腳本：

$(document).ready(function(){  
    $('#btn_check').click(function() { 
     var length = 0; 
     $('#list_lab').find('tr').each(function(){ 
      var row = $(this); 
      if(row.find('input[type="checkbox"]').is(':checked')){ 
       $('#list_lab').find(td).append('<input type="text" name="mytext[]" id="txt_row '" + length + "'" />') 
      } 
      length++; 
     }); 
    }); 

}); 

Answer 1

這裏的工作代碼。點擊下面的按鈕來運行它。

這條線：

$('#list_lab').find(td).append('<input type="text" name="mytext[]" id="txt_row '" + length + "'" />') 

應該是：

$('#list_lab').find('td').append('<input type="text" name="mytext[]" id="txt_row_"' + length + '" />'); 

$(document).ready(function() { 
 
    function create_inputs() { 
 
    var length = 0; 
 
    $('#list_lab').find('tr').each(function() { 
 
     var row = $(this); 
 
     if (row.find('input[type="checkbox"]').is(':checked')) { 
 
     // first check if you've already added an input to this row 
 
     if ($(this).find('input[type="text"]').length == 0) { 
 
      $(this).find('td').append('<input type="text" name="mytext[]" id="txt_row_"' + length + '" />'); 
 
     } 
 
     } else { 
 
     // if this is not checked, then remove any inputs that you might have added 
 
     $(this).find('input[type="text"]').remove(); 
 
     } 
 
     length++; 
 
    }); 
 

 
    } 
 

 
    // set this to run whenever you click a checkbox 
 
    $('input[type="checkbox"]').click(function() { 
 
    create_inputs(); 
 
    }); 
 
    
 
    // and also run once when you first load 
 
    create_inputs(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="list_lab" class="checkbox-inline"> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_0" type="checkbox" name="list_lab$0" checked="checked" value="Electrolyte (Lab)"> 
 
     <label for="list_lab_0">Electrolyte (Lab)</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_1" type="checkbox" name="list_lab$1" checked="checked" value="Creatinine (plus eGFR)"> 
 
     <label for="list_lab_1">Creatinine (plus eGFR)</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_2" type="checkbox" name="list_lab$2" value="Blood Urea Nitrogen"> 
 
     <label for="list_lab_2">Blood Urea Nitrogen</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_3" type="checkbox" name="list_lab$3" value="Complete Blood Count"> 
 
     <label for="list_lab_3">Complete Blood Count</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_4" type="checkbox" name="list_lab$4" value="Dengue NS1 Ag"> 
 
     <label for="list_lab_4">Dengue NS1 Ag</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_5" type="checkbox" name="list_lab$5" value="Influenza A/B A/(H1N1) Screening"> 
 
     <label for="list_lab_5">Influenza A/B A/(H1N1) Screening</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input id="list_lab_6" type="checkbox" name="list_lab$6" value="Urine Exam"> 
 
     <label for="list_lab_6">Urine Exam</label> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="btn_check">click me</button>