无法在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>

​