编辑/删除HTML表w/Javascript或Jquery通过模态

Edit/Delete HTML table w/Javascript or Jquery through modal

本文关键字：Jquery 模态 删除 HTML 编辑 Javascript      更新时间：2023-09-26

为早期项目工作，目标如下:制作一个可以添加/编辑/删除电影的表。我已经能够将电影添加到我的表中，但似乎无法弄清楚我的编辑和删除按钮。任何建议都会有所帮助!

<!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/

你需要通过使用模态ID来调用模态

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

查看这个Demo

相关文章：