通過模式編輯/刪除帶有Javascript或Jquery的HTML表格

處理早期項目的項目，這裏的目標是：製作一個表格，您可以添加/編輯/刪除電影。我已經能夠將電影添加到我的表格，但似乎無法弄清楚我的編輯和刪除按鈕。任何提示將有所幫助！通過模式編輯/刪除帶有Javascript或Jquery的HTML表格

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

來源

2016-09-23 crispen411312

你檢查DataTable中調用模式？這裏是它的鏈接https://editor.datatables.net/examples/simple/inTableControls.html這是專門構建與HTML表格創造奇蹟。 – snit80

您需要使用有模態ID

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

檢查這個Demo

來源

2016-09-23 03:32:00

Nah它已經調用表格行點擊模式，只是沒有在小提琴由於jquery不能正常工作。在錶行上單擊模式彈出來編輯文本，但我不知道如何將文本保存到所選的行。 – crispen411312

通過模式編輯/刪除帶有Javascript或Jquery的HTML表格

回答

相關問題