各行の編集、削除をクリックすると、登録内容を編集、削除できるプログラムを作りました。
しかし、クリックイベントが複数同時に動いてしまい、それまでにクリックした項目全ての内容が書き換わってしまいました。
良い書き方が思いつきません、、、
同じ行だけを編集削除するにはどうしたら良いですか?
教えていただけると助かります。
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});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/08 08:11
退会済みユーザー
2018/03/08 08:31