Question

我有this段代码应该执行以下操作：

输入每个输入字段并按＆＃34; 添加行＆＃34;按钮新行应添加到表格的末尾。按＆＃34; 删除行＆＃34;按钮应删除最后创建的行。

此时，当我按下任何按钮时，它都不会做任何事情。

提及一下，当我验证 Chromes＆＃39; 控制台是否存在 JS错误时，我得到了这个：

未捕获的ReferenceError：$未定义

这是HTML：

<body style="background-color:lavender">
<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">
                            User
                        </th>
                        <th class="text-center">
                            Password
                        </th>
                        <th class="text-center">
                            IP
                        </th>
                        <th class="text-center">
                            Country
                        </th>
                        <th class="text-center">
                            IP disponibility
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='user0'  placeholder='User' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='pass0' placeholder='Password' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ip0' placeholder='IP' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='country0' placeholder='Country' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ipDisp0' placeholder='IP Details' 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>

这是JS：

    $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md'  /></td><td><input  name='pass"+i+"' type='text' placeholder='Password'  class='form-control input-md'></td><td><input  name='ip"+i+"' type='text' placeholder='IP'  class='form-control input-md'></td><td><input  name='country"+i+"' type='text' placeholder='Country'  class='form-control input-md'></td><td><input  name='ipDisp"+i+"' type='text' placeholder='IP details'  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--;
         }
     });

});

关于我应该在 JS 中改变什么的想法？

由于

Answer 1

记住jquery库必须先放在bootstrap之后，也许这就是你的问题，你的代码很好，这里是使用jquery 1.11.0的工作小提琴

<script src="jquery.min.js">
<script src="bootstrap.min.js">

小提琴[1]：http://jsfiddle.net/gLrhnqo2/

Answer 2

您需要添加Jquery脚本。如果你选择最新版本效果很好。

如何在Bootstrap中动态添加行

2 个答案: