我的动态表行创建代码不起作用

Question

我想创建一个动态表。这个代码对我来说很好，直到我在＃34; Recruitment stage＆＃34;中有了Text框而不是这个组合框。专栏

我已使用此代码段http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion

的帮助

所以我的问题是，在将上述代码段更改为以下代码后，我无法添加行。

所以请有人告诉我为什么这不起作用？

这是我的表https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&oe=5509770D

的屏幕截图

快速回复将不胜感激

＆＃13;

＆＃13;

  $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td>
                          <select name='course"+i+"' class='form-control'>
                             <option value=''>Select</option>
                             <option value='1'>Telephonic Interview</option>
                             <option value='2'>Skype Interview</option>
                             <option value='3'>Personal Interview</option>
                          </select>
                        </td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});

＆＃13;

    <div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Recruitment Stage
                        </th>
                        <th class="text-center">
                            Remark
                        </th>
                        <th class="text-center">
                            Comments
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                          <select name="course0" class="form-control">
                             <option value="">Select</option>
                             <option value="1">Telephonic Interview</option>
                             <option value="2">Skype Interview</option>
                             <option value="3">Personal Interview</option>
                          </select>
                        </td>
                        <td>
                        <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果javascript中的单个语句有多行，则应在每行末尾使用"，在下一行的开头使用+ "（反之亦然）。这称为连接

＆＃13;

＆＃13;

$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td>"
                          +"<select name='course"+i+"' class='form-control'>"
                             +"<option value=''>Select</option>"
                             +"<option value='1'>Telephonic Interview</option>"
                             +"<option value='2'>Skype Interview</option>"
                             +"<option value='3'>Personal Interview</option>"
                          +"</select>"
                        +"</td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});

＆＃13;

#add_row, #delete_row
{
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Recruitment Stage
                        </th>
                        <th class="text-center">
                            Remark
                        </th>
                        <th class="text-center">
                            Comments
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                          <select name="course0" class="form-control">
                             <option value="">Select</option>
                             <option value="1">Telephonic Interview</option>
                             <option value="2">Skype Interview</option>
                             <option value="3">Personal Interview</option>
                          </select>
                        </td>
                        <td>
                        <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

＆＃13;

＆＃13;

＆＃13;