【问题标题】：Dynamic table row creation动态表行创建
【发布时间】：2017-03-03 07:16:38
【问题描述】：

我正在尝试在表中插入动态行。显然，我能够添加输入行，但无法为按钮 <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td> 添加新行。它给出了Uncaught SyntaxError: missing ) after argument list的错误

<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
   <br>
   <thead>
      tr>
      <th>Name</th>
      <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr id='addr0'>
         <td>1
         </td>
         <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>
      </tr>
      <tr id='addr1'></tr>
   </tbody>
   <tfoot>
   </tfoot>
</table>

Javascript

<script type="text/javascript">
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td>   <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>");
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++; 
    });
});
</script>

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

使用这个，你把 " 代替 '... 并在 html 检查行 <tr> 但显示 tr>

var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td>   <td class='text-center'><a class='btn btn-info btn-xs' ><span class='glyphicon glyphicon-edit'></span> Select</a> </td>");
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });

【讨论】：

【解决方案2】：

尽量保持" 和' 干净。你有很多混淆了

var i = 1;
$('#add_row').click(
  function(){
    $('#addr'+i).html('<td>' + (i+1) + '</td><td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span>Select</a></td>');
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
 <thead>
 <tr>
 <th>Name</th>
 <th>Action</th>
 </tr>
 </thead>
 <tbody>
 <tr id='addr0'>
 <td>1
 </td>              
 <td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>    
  </tr>
  <tr id="addr1"></tr>                          
  </tbody>          
  <tfoot>
  </tfoot>
  </table>
  
  <button id="add_row">Add Row</button>

【讨论】：