Q&A各行の編集、削除をクリックすると、登録内容を編集、削除できるプログラムを作りました。
しかし、クリックイベントが複数同時に動いてしまい、それまでにクリックした項目全ての内容が書き換わってしまいました。
良い書き方が思いつきません、、、
同じ行だけを編集削除するにはどうしたら良いですか？
教えていただけると助かります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="" rel="stylesheet"> 7 <script src="js/jquery/jquery-3.3.1.min.js"></script> 8</head> 9<body> 10 <div id = "overlay"></div> 11 12 <form id = "form"> 13 <table border = "1" id = "user_table" class = "table"> 14 <tr><td>ID</td><td>ユーザー</td></tr> 15 </table> 16 <table border = "1" id = "editing_table" class = "table"> 17 <tr><td>編集</td></tr> 18 </table> 19 <table border = "1" id = "delete_table" class = "table"> 20 <tr><td>削除</td></tr> 21 </table> 22 </form> 23 <div class = "clear"></div> 24 25 <div id = "editing_modalWindow"> 26 <div id = "editing_div1">ユーザーID：</div> 27 <div id = "editing_div2"></div> 28 <div class = "clear"></div> 29 <div id = "editing_div3">ユーザー名：</div> 30 <div id = "editing_div4"></div> 31 <div class = "clear"></div> 32 <div id = "editing_div5">ユーザー名変更</div> 33 <input ="text" id = "editing_div6"></input> 34 </br> 35 <button type = "button" id = "button1">OK</button> 36 <button type = "button" id = "button2">キャンセル</button> 37 <div class = "clear"></div> 38 </div> 39 40 <div id = "delete_modalWindow"> 41 <div id = "delete_div1">ユーザーID：</div> 42 <div id = "delete_div2"></div> 43 <div class = "clear"></div> 44 <div id = "delete_div3">ユーザー名：</div> 45 <div id = "delete_div4"></div> 46 <div class = "clear"></div> 47 <div id = "delete_div5">データを削除してもよろしいですか?</div> 48 <button type = "button" id = "button3">OK</button> 49 <button type = "button" id = "button4">キャンセル</button> 50 <div class = "clear"></div> 51 </div> 52 53 <script type=""></script> 54</body> 55</html> 56
css
1#form{ z-index: 1; 2} 3.table { border: 1px solid black; 4 border-collapse: collapse; 5} 6#user_table { margin: 10px 10px; 7 float: left; 8} 9#editing_table { margin: 10px 20px 10px 20px; 10 float: left; 11} 12#delete_table { margin: 10px 0px 10px 10px; 13 float: left; 14} 15#editing_modalWindow { display: none; 16 margin: 10px 20px; 17 background-color:#fff; 18 padding: 20px; 19 position: fixed; 20 border :1px solid black; 21 z-index: 3; 22} 23#editing_div1 { margin: 0px; 24 float: left; 25} 26#editing_div2 { margin: 0px; 27 width: 120px; 28 height: 20px; 29 float: left; 30} 31#editing_div3 { margin: 0px; 32 float: left; 33} 34#editing_div4 { margin: 0px; 35 width: 120px; 36 height: 20px; 37 float: left; 38} 39#editing_div5 { margin: 10px 0px; 40} 41#editing_div6 { margin: 10px 0px; 42 width: 260px; 43 height: 20px; 44 border:1px solid black; 45} 46#button1 { width: 100px; 47margin: 0px 40px 0px 0px; 48} 49#button2 { width: 100px; 50} 51#delete_modalWindow{display: none; 52 margin: 10px 20px; 53 background-color:#fff; 54 padding: 20px; 55 position: fixed; 56 border :1px solid black; 57 z-index:3; 58} 59#delete_div1 { margin: 0px; 60 float: left; 61} 62#delete_div2 { margin: 0px; 63 width: 120px; 64 height: 20px; 65 float: left; 66} 67#delete_div3 { margin: 0px; 68 float: left; 69} 70#delete_div4 { margin: 0px; 71 width: 120px; 72 height: 20px; 73 float: left; 74} 75#delete_div5 { margin: 10px 0px; 76} 77#button3 { width: 100px; 78margin: 0px 40px 0px 0px; 79} 80#button4 { width: 100px; 81} 82#overlay {z-index: 2; 83 position: fixed; 84 width: 100%; 85 height: 120%; 86 background-color: rgba(0,0,0,0.75); 87 display: none; 88} 89.clear { clear: both; 90}
javascript
1//テーブル作成 2var user_table = document.getElementById("user_table"); 3var editing_table = document.getElementById("editing_table"); 4var delete_table = document.getElementById("delete_table"); 5 6for(var num = 1; num <= 5; num++){ 7 user_table.innerHTML += "<tr><td id = 'id" + num + "'>" + num + "</td><td id= 'user" + num +"'>ユーザー名1</td></tr>"; 8 editing_table.innerHTML += "<tr><td id= 'editing" + num + "'>編集</td></tr>"; 9 delete_table.innerHTML += "<tr><td id= 'delete" + num + "'>削除</td></tr>"; 10} 11 12//要素のテキストを取得 13 var user_id1 = $("#id1").text(); 14 var user_id2 = $("#id2").text(); 15 var user_id3 = $("#id3").text(); 16 var user_id4 = $("#id4").text(); 17 var user_id5 = $("#id5").text(); 18 var user_name5 = $("#user5").text(); 19 var user_name1 = $("#user1").text(); 20 var user_name2 = $("#user2").text(); 21 var user_name3 = $("#user3").text(); 22 var user_name4 = $("#user4").text(); 23 24//編集 25$("#editing1").click(function(){ 26 $("#editing_modalWindow,#overlay").show(); 27 $("#editing_div2").html(user_id1); 28 $("#editing_div4").html(user_name1); 29 $("#button1").click(function(){ 30 var editing_name1 = $("#editing_div6").val(); 31 $("#user1").html(editing_name1); 32 }); 33}); 34 35$("#editing2").click(function(){ 36 $("#editing_modalWindow,#overlay").show(); 37 $("#editing_div2").html(user_id2); 38 $("#editing_div4").html(user_name2); 39 $("#button1").click(function(){ 40 var editing_name2 = $("#editing_div6").val(); 41 $("#user2").html(editing_name2); 42 }); 43}); 44 45$("#editing3").click(function(){ 46 $("#editing_modalWindow,#overlay").show(); 47 $("#editing_div2").html(user_id3); 48 $("#editing_div4").html(user_name3); 49 $("#button1").click(function(){ 50 var editing_name3 = $("#editing_div6").val(); 51 $("#user3").html(editing_name3); 52 }); 53}); 54 55$("#editing4").click(function(){ 56 $("#editing_modalWindow,#overlay").show(); 57 $("#editing_div2").html(user_id4); 58 $("#editing_div4").html(user_name4); 59 $("#button1").click(function(){ 60 var editing_name4 = $("#editing_div6").val(); 61 $("#user4").html(editing_name4); 62 }); 63}); 64 65$("#editing5").click(function(){ 66 $("#editing_modalWindow,#overlay").show(); 67 $("#editing_div2").html(user_id5); 68 $("#editing_div4").html(user_name5); 69 $("#button1").click(function(){ 70 var editing_name5 = $("#editing_div6").val(); 71 $("#user5").html(editing_name5); 72 }); 73}); 74 75//削除 76$("#delete1").click(function(){ 77 $("#delete_modalWindow,#overlay").show(); 78 $("#delete_div2").html(user_id1); 79 $("#delete_div4").html(user_name1); 80 $("#button3").click(function(){ 81 $("#id1,#user1,#editing1,#delete1").remove(); 82 }); 83}); 84 85$("#delete2").click(function(){ 86 $("#delete_modalWindow,#overlay").show(); 87 $("#delete_div2").html(user_id2); 88 $("#delete_div4").html(user_name2); 89 $("#button3").click(function(){ 90 $("#id2,#user2,#editing2,#delete2").remove(); 91 }); 92}); 93 94$("#delete3").click(function(){ 95 $("#delete_modalWindow,#overlay").show(); 96 $("#delete_div2").html(user_id3); 97 $("#delete_div4").html(user_name3); 98 $("#button3").click(function(){ 99 $("#id3,#user3,#editing3,#delete3").remove(); 100 }); 101}); 102 103$("#delete4").click(function(){ 104 $("#delete_modalWindow,#overlay").show(); 105 $("#delete_div2").html(user_id4); 106 $("#delete_div4").html(user_name4); 107 $("#button3").click(function(){ 108 $("#id4,#user4,#editing4,#delete4").remove(); 109 }); 110}); 111 112$("#delete5").click(function(){ 113 $("#delete_modalWindow,#overlay").show(); 114 $("#delete_div2").html(user_id5); 115 $("#delete_div4").html(user_name5); 116 $("#button3").click(function(){ 117 $("#id5,#user5,#editing5,#delete5").remove(); 118 }); 119}); 120 121$("#button1,#button2,#button3,#button4").click(function(){ 122 $("#editing_modalWindow,#delete_modalWindow,#overlay").fadeOut(); 123});
回答1件
0
サンプルを作成したので、参考にしてください。
肝要なのは、$(this)の使いどころです。
提示されたソースを見る限り、HTMLから見直すのが良いと思います。
JavaScriptの参考サイトなどはセレクタをIDで記述しているものが多く、初心者の書くHTMLはIDだらけになってしまいがちですが、メンテナンスが大変だし、ちょっとした変更でスクリプトが動かなくなって手詰まりになります。
この機会にjQueryにしてもPure JavaScriptにおいても、セレクタをしっかり学んでください。
http://semooh.jp/jquery/api/selectors/
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル</title> 6 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="row"> 11 <div class="col-md-8 col-md-offset-2"> 12 <div class="table-responsive"> 13 <table class="editable table table-condensed"> 14 <thead> 15 <tr> 16 <th>ユーザー</th> 17 <th>編集</th> 18 <th>削除</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr> 23 <td>ユーザー1</td> 24 <td><input type="button" class="edit" value="編集" /></td> 25 <td><input type="button" class="delete" value="削除" /></td> 26 </tr> 27 <tr> 28 <td>ユーザー2</td> 29 <td><input type="button" class="edit" value="編集" /></td> 30 <td><input type="button" class="delete" value="削除" /></td> 31 </tr> 32 <tr> 33 <td>ユーザー3</td> 34 <td><input type="button" class="edit" value="編集" /></td> 35 <td><input type="button" class="delete" value="削除" /></td> 36 </tr> 37 <tr> 38 <td>ユーザー4</td> 39 <td><input type="button" class="edit" value="編集" /></td> 40 <td><input type="button" class="delete" value="削除" /></td> 41 </tr> 42 <tr> 43 <td>ユーザー5</td> 44 <td><input type="button" class="edit" value="編集" /></td> 45 <td><input type="button" class="delete" value="削除" /></td> 46 </tr> 47 </tbody> 48 </table> 49 </div> 50 </div> 51 </div> 52 </div> 53 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 54 <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 55 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> 56 <script type="text/javascript"> 57 "use strict"; 58 $(function () { 59 $(".editable input:button").on('click', function () { 60 let row = $(this).closest('tr'); 61 row.css({backgroundColor: '#FFCCCC'}); 62 if ($(this).hasClass('edit')) { 63 bootbox.prompt('新しいユーザー名を入力してください。', function (result) { 64 if (result !== null) { 65 row.find('td:first').text(result); 66 } 67 row.css({backgroundColor: ''}); 68 }); 69 } else if ($(this).hasClass('delete')) { 70 bootbox.confirm('本当に削除しますか？', function (result) { 71 if (result) { 72 row.remove(); 73 } 74 row.css({backgroundColor: ''}); 75 }); 76 } 77 }); 78 }); 79 </script> 80 </body> 81</html>
投稿2018/03/07 15:46
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/08 08:11
退会済みユーザー
2018/03/08 08:31