Question

我的表格中有一个表格，它从MYSQL数据库中获取数据。我试图通过允许用户添加更多信息来使其动态化，但是我在查询的最后一行下直接添加额外的行时遇到了困难。这是我到目前为止的代码并且我尝试添加一个使用JQuery的新行：

    <h4>Manage Courses</h4>

<div class="container">
    <div class = "container-fluid">
        <div id = "table_container" style="margin-top:50px;" class="mainbox col-md-6">
            <div class="row clearfix">
                <div class="col-md-12">
                    <table class="table table-bordered table-hover" id="tab_logic">
                        <thead>
                            <tr >
                                <!-- <th class="text-center">
                                    #
                                </th> -->
                                <th class="text-center">
                                    Course Code
                                </th>
                                <th class="text-center">
                                    Course Title
                                </th>
                                <!-- <th class="text-center">
                                    Edit
                                </th>
                                <th class="text-center">
                                    Delete
                                </th> -->
                            </tr>
                        </thead>
                        <?php foreach ($courses as $row) {
                            echo "<tr><td>";
                            echo $row['course_code'];
                            echo "</td><td>";
                            echo $row['course_title'];
                            echo "</td>";
                            echo "</tr>"; }
                        ?>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    1
                                </td>
                                <td>
                                    <input type="text" name='code'  placeholder='Code' class="form-control"/>
                                </td>
                                <td>
                                    <input type="text" name='title' placeholder='Title' class="form-control"/>
                                </td>
                                <td>
                                    <p 
                                    data-placement="top" 
                                    title="Edit"></a>
                                    <button class="btn btn-primary btn-xs" 
                                    data-title="Edit" 
                                    data-toggle="modal" 
                                    data-target="#edit" >
                                    <span class="glyphicon glyphicon-pencil"></span></button></p>
                                </td>
                                <td>
                                    <p 
                                    data-placement="top" 
                                    data-toggle="tooltip" 
                                    style="margin-left:5px" 
                                    itle="Delete">
                                    <button class="btn btn-danger btn-xs" 
                                    data-title="Delete" 
                                    data-toggle="modal" 
                                    data-target="#delete" >
                                    <span class="glyphicon glyphicon-trash"></span></button></p>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row
                <span class="glyphicon glyphicon-plus"></span>
            </a>
            <a id='delete_row' class="pull-left btn btn-default">Delete Row
                <span class="glyphicon glyphicon-trash"></span>
            </a>
        </div>
    </div>
</div>

这是支持添加和删除按钮的Jquery：

    $(document).ready(function(){
var i=1;
    $("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='code"+i+"' type='text' placeholder='Code' class='form-control input-md'  /> </td><td><input  name='title"+i+"' type='text' placeholder='Title'  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--;
}
       });
     });

代码在最后一行下面添加了一行，但由于某种原因，它们在它上面添加了第二行。我遇到的另一个问题是能够复制用于删除和编辑每一行的字形。我真的希望为每一行和添加的新行添加这些。

任何帮助将不胜感激！：）

Answer 1

在你提供的html中没有“#tab_logic”。您还在<tbody>和<thead>选项之外创建行。您也没有为jQuery函数中的glyphicons创建html。

修改：抱歉有tab_logic。但是，您需要确保包含glypicon的html。更好的方法是克隆现有元素并插入它。

我没有看到正如您所描述的那样插入了额外的行：

http://jsfiddle.net/pekv2tx0/

另外：修复你的HTML，这是造成问题的原因，注意没有正文的关闭锚标记，在ap标记内，你有一个空行，所以它没有插入额外的，它已经在html中了：

<p data-placement="top" title="Edit"></a> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></button></p> </td> <tr id='addr1'></tr>

Answer 2

在点击功能中，尝试将整行添加到tbody：

$("#add_row").click(function(){

    $('#tab_logic tbody').append("<tr><td>"+ (i+1) +"</td><td><input name='code"+i+"' type='text' placeholder='Code' class='form-control input-md'  /> </td><td><input  name='title"+i+"' type='text' placeholder='Title'  class='form-control input-md'></td></tr>");
    i++;
});

使用PDO和bootstrap向现有html表添加新行

2 个答案: