Question

为早期项目开展项目，目标是：制作一个表格，您可以在其中添加/编辑/删除电影。我已经能够将电影添加到我的桌面，但似乎无法弄清楚我的编辑和删除按钮。任何提示都会有所帮助！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  </head>
  <body>



 <h1>Movies List</h1>
      <div class="container-fluid">
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContainer">
       Add Movie
     </button>
     <div id="modalContainer" class="modal fade">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" >&times;</button>
             <h4 class="modal-title">Enter a New Movie w/Director.</h4>
           </div>
           <div class="modal-body">
             <div>
               <div class="form-group">
                 <label for="firstName" class="sr-only">Movie Name:</label>
                 <input id="firstName" type="text" class="form-control" placeholder="Movie Name" />
               </div>
               <div class="form-group">
                 <label for="lastName" class="sr-only">Director:</label>
                 <input id="lastName" type="text" class="form-control" placeholder="Director" />
               </div>
               <button onclick="myFunction()" class="btn btn-primary" data-dismiss="modal">Submit</button>
             </div>
            </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
         </div>
       </div>
     </div>
   </div>



<div class="row">
    <div class="col-xs-12 col-md-12">
        <table id="myTable" class="table table-condensed table-hover table-striped">
            <thead>
            <tr>
                <th>Movie</th>
                <th>Director</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>The Terminator</td>
                <td>Jack Black</td>

            </tr>
            <tr>
                <td>The Virgin Suicides</td>
                <td>Uve Bol</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button id= "btnEdit" onClick = "myEdit()" type="button" class="btn btn-primary">Save changes</button>
        <button id= "btnDelete" type="button" class="btn btn-danger">Delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>

    $('table tbody tr  td').on('click',function myEdit(){
      $("#myModal").modal("show");
      $("#txtfname").val($(this).closest('tr').children()[0].textContent);
      $("#txtlname").val($(this).closest('tr').children()[1].textContent);
      $("#tldr").val($(this).closest('tr').children()[0].textContent);
      $("#tldrs").val($(this).closest('tr').children()[1].textContent);
    });

    var toDos = []

        function myFunction() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var len = table.rows.length;
            row.id = 'row_' + len;
            cell1.id = 'tldr';
            cell2.id = 'tldrs';

        cell1.innerHTML = document.getElementById('firstName').value;
        cell2.innerHTML = document.getElementById('lastName').value;

      var data = {firstName: document.getElementById('firstName').value,
      lastName: document.getElementById('lastName').value,
        };

      $('table tbody tr  td').on('click',function(){
        $("#myModal").modal("show");
        $("#txtfname").val($(this).closest('tr').children()[0].textContent);
        $("#txtlname").val($(this).closest('tr').children()[1].textContent);
        $("#tldr").val($(this).closest('tr').children()[0].textContent);
        $("#tldrs").val($(this).closest('tr').children()[1].textContent);
        });

    toDos.push(data);
    console.log(toDos);
  };

function myEdit(){

  $('table tbody tr  td').on('click',function myEdit(){
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
};

    </script>
  </body>
</html>

这里也是一个小提琴，但我遇到了让jquery正常运行的问题。

https://jsfiddle.net/yabhjmz0/10/

Answer 1

您需要使用模态ID

来调用模态

 <button type="button" data-target="#myModal" class="btn btn-primary" data-toggle="modal" >

检查此Demo

通过模式编辑/删除带有Javascript或Jquery的HTML表格

1 个答案: