Question

我正在使用bootstrap创建一个表，在表的顶部我想保留行编辑按钮。当我选择一行然后如果我单击编辑按钮时，将出现一个对话框，我们用它来编辑该行中的内容。我正在使用Java脚本功能而不使用任何PHP代码。请帮我提一下这个暗示。

<!DOCTYPE html>
<html lang="en">
  <head>
 <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
    <body>
      <div class ="container">
<table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>Parameter Names</th>
                    <th>Parameter Values</th>
                    <th>Remarks</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>johncarter@mail.com</td>
                    <td>John</td>
                    <td>Carter</td>
                </tr>
                <tr>
                    <td>peterparker@mail.com</td>
                    <td>Peter</td>
                    <td>Parker</td>
                </tr>
                <tr>
                    <td>johnrambo@mail.com</td>
                    <td>John</td>
                    <td>Rambo</td>
                </tr>
                <tr>
                    <td>johnrambo@mail.com</td>
                    <td>John</td>
                    <td>Rambo</td>
                </tr>
            </tbody>
        </table>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      <script src="js/bootstrap.min.js"></script>
    </body>
</html>

提前感谢。

Answer 1

以下是我在bootsnipp上找到的示例。它应该指向正确的方向

     $(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><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--;
         }
     });

});

Bootstrap：在表格顶部添加行编辑按钮

1 个答案: