简体   繁体   中英

Modal button added to html table rows, while table data is being imported in from json file

 $('.toggleModal').on('click', function (e) { $('.modal').toggleClass('active'); }); 
 html{ font:0.75em/1.5 sans-serif; color:#333; background-color:#fff; padding:1em; } /* Tables */ table{ width:100%; margin-bottom:1em; border-collapse: collapse; border: 1px; } th{ font-weight:bold; background-color:#ddd; } td{ padding:0.5em; border:1px solid black; } tr:nth-child(even) { background-color: #ddd; } a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; } @font-face { font-family: 'ios7-icon'; src: url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff") format("woff"), url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf") format("ttf"); font-weight: normal; font-style: normal; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 50px; font-family: 'Helvetica Neue' !important; font-weight: 300; } .wrapper { max-width: 500px; margin: 0 auto; } h1 { font-weight: 100; font-size: 45px; color: #007aff; } h2 { font-weight: 500; font-size: 21px; margin-bottom: 15px; } section { margin-top: 30px; } section p { line-height: 1.4; margin-bottom: 20px; } button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; outline: none; font: inherit; cursor: pointer; margin: 0; padding: 0; background: LightBlue; color: #007aff; font-weight: 300; font-size: 14px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; /* &:nth-child(even){ */ /* background: white; */ /* } */ /* &:last-child { border-color: red; margin-bottom: 0; }*/ } button:hover { text-decoration: underline; } button.button-border { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 10px 12px 8px 12px; border: 1px solid #007aff; } button.button-border:hover { background: #007aff; color: #ffffff; text-decoration: none; } button.button-success { /color: #4dd865; */ border-color: #4dd865; } button.button-success:hover { background: #4dd865; } button.button-error { color: #ff3b30; border-color: #ff3b30; } button.button-error:hover { background: #ff3b30; } .modal { display: none; position: fixed; top: 50%; left: 50%; width: 430px; height: auto; margin-left: -200px; margin-top: -150px; background-color: #ffffff; padding: 25px; border-radius: 5px; z-index: 10; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); } .modal.active { display: block; } .modal header { position: relative; } .modal h2 { text-align: center; } .modal .close { position: absolute; top: 3px; right: 0; margin: 0; } .pull-right { float: right; } .icon { display: inline-block; font-size: inherit; font-family: circle; margin-right: 5px; color: inherit; -webkit-text-rendering: geometricPrecision; -moz-text-rendering: geometricPrecision; -ms-text-rendering: geometricPrecision; -o-text-rendering: geometricPrecision; text-rendering: geometricPrecision; } 
 <html> <head> <link rel="stylesheet" type="text/css" href="css/tablestyle.css"> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> <script type="text/javascript" src="datasource/people.json"> </script> <script> $(function() { var people = []; $.getJSON('people.json', function(data) { $.each(data.person, function(i, f) { var tblRow = "<tr>" + "<td>" + "</td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "<td>" + f.hours + "</td>" + " </tr>" $(tblRow).appendTo("#userdata tbody"); }); }); }); </script> <body> <table id="userdata" rules="groups" style="border: 1px solid black;"> <thead> <tr> <th> </th> <th>EmployeeNum</th> <th>EmployeeName</th> <th>ChargeNum</th> <th>Hours</th> </tr> <tbody> </tbody> </thead> <tr id="1"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button> </td> <td>123</td> <td>Mike</td> <td>10</td> <td>40</td> </tr> <tr id="2"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> <tr id="3"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> <tr id="4"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> </table> <div class="modal"> <header> <button class="close toggleModal">Close</button> </header> <section> <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p> </section> <button class="button-border button-success toggleModal"> <span class="icon"></span> Approve </button> <button class="button-border button-error pull-right toggleModal"> <span class="icon">< </span> Disapprove </button> <!-- <script> $(docuemnt).ready(function(){ --> <!-- var rowCount = $('table#tableId tr:#a').index() + 1; --> <!-- $("#a").style.color = "red"}); --> <!-- </script> --> </div> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/index.js"></script> </body> </html> 

In this code I still have my original table info. The snippet is not working properly for some reason so I have added screenshots of the table a modal view. 1. table view with buttons going to the rows with users declared inside the html file, while the blank rows are the users being imported from a json file and 2. This is the window that comes up after pressing the button

I know there is definitely a way to make this code cleaner and better. Is there a way I can make these buttons work before I attempt to clean up the code? End goal here is to remove the table data completely from HTML and only import the data from a json(which will later be replaced by a db when everything is running smoothly)

edit: this is the json code I am using. I took this example and was trying to implement it in my table, so the fields do not match up. I left the firstname field blank as to leave room for the button on the table, I am not sure if this is the correct way to approach this or not.

{
   "person": [
   {
       "firstName": " ",
       "lastName": "11",
       "job": "James",
       "roll": 20,
       "hours": 20
   },
   {
       "firstName": " ",
       "lastName": "Wayne",
       "job": "Playboy",
       "roll": 30,
       "hours": 40
   },
   {
       "firstName": " ",
       "lastName": "Parker",
       "job": "Photographer",
       "roll": 40,
       "hours": 40
   }
   ]
}

I posted a code snippet below. I commented out your original $.getJson function and loaded the contents of people.json into an object. I then iterated through, used jQuery to create the buttons and rows, and appended it to #userdata tbody . Let me know if you have questions.

 $('.toggleModal').on('click', function (e) { $('.modal').toggleClass('active'); }); 
 html{ font:0.75em/1.5 sans-serif; color:#333; background-color:#fff; padding:1em; } /* Tables */ table{ width:100%; margin-bottom:1em; border-collapse: collapse; border: 1px; } th{ font-weight:bold; background-color:#ddd; } td{ padding:0.5em; border:1px solid black; } tr:nth-child(even) { background-color: #ddd; } a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; } @font-face { font-family: 'ios7-icon'; src: url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff") format("woff"), url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf") format("ttf"); font-weight: normal; font-style: normal; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 50px; font-family: 'Helvetica Neue' !important; font-weight: 300; } .wrapper { max-width: 500px; margin: 0 auto; } h1 { font-weight: 100; font-size: 45px; color: #007aff; } h2 { font-weight: 500; font-size: 21px; margin-bottom: 15px; } section { margin-top: 30px; } section p { line-height: 1.4; margin-bottom: 20px; } button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: none; outline: none; font: inherit; cursor: pointer; margin: 0; padding: 0; background: LightBlue; color: #007aff; font-weight: 300; font-size: 14px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; /* &:nth-child(even){ */ /* background: white; */ /* } */ /* &:last-child { border-color: red; margin-bottom: 0; }*/ } button:hover { text-decoration: underline; } button.button-border { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 10px 12px 8px 12px; border: 1px solid #007aff; } button.button-border:hover { background: #007aff; color: #ffffff; text-decoration: none; } button.button-success { /color: #4dd865; */ border-color: #4dd865; } button.button-success:hover { background: #4dd865; } button.button-error { color: #ff3b30; border-color: #ff3b30; } button.button-error:hover { background: #ff3b30; } .modal { display: none; position: fixed; top: 50%; left: 50%; width: 430px; height: auto; margin-left: -200px; margin-top: -150px; background-color: #ffffff; padding: 25px; border-radius: 5px; z-index: 10; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); } .modal.active { display: block; } .modal header { position: relative; } .modal h2 { text-align: center; } .modal .close { position: absolute; top: 3px; right: 0; margin: 0; } .pull-right { float: right; } .icon { display: inline-block; font-size: inherit; font-family: circle; margin-right: 5px; color: inherit; -webkit-text-rendering: geometricPrecision; -moz-text-rendering: geometricPrecision; -ms-text-rendering: geometricPrecision; -o-text-rendering: geometricPrecision; text-rendering: geometricPrecision; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <script> $(function() { var people = []; let data = { "person": [ { "firstName": " ", "lastName": "11", "job": "James", "roll": 20, "hours": 20 }, { "firstName": " ", "lastName": "Wayne", "job": "Playboy", "roll": 30, "hours": 40 }, { "firstName": " ", "lastName": "Parker", "job": "Photographer", "roll": 40, "hours": 40 } ] }; for (let i = 0; i < data.person.length; i++) { let person = data.person[i]; let row = $(`<tr></tr>`); // Create a jQuery object for the button cell let buttonCell = $(`<td></td>`); // Add the actual button to the cell buttonCell.append(` <button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval </button>`); // Add the whole button cell to the row row.append(buttonCell); row.append(`<td>` + person.lastName + `</td>`); row.append(`<td>` + person.job + `</td>`); row.append(`<td>` + person.roll + `</td>`); row.append(`<td>` + person.hours + `</td>`); $("#userdata tbody").append(row); } // We have to attach click handlers to the new buttons that were created $('.toggleModal').on('click', function (e) { $('.modal').toggleClass('active'); }); /* $.getJSON('people.json', function(data) { $.each(data.person, function(i, f) { var tblRow = "<tr>" + "<td>" + "</td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "<td>" + f.hours + "</td>" + " </tr>" $(tblRow).appendTo("#userdata tbody"); }); }); */ }); </script> <body> <table id="userdata" rules="groups" style="border: 1px solid black;"> <thead> <tr> <th> </th> <th>EmployeeNum</th> <th>EmployeeName</th> <th>ChargeNum</th> <th>Hours</th> </tr> <tbody> </tbody> </thead> <tr id="1"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button> </td> <td>123</td> <td>Mike</td> <td>10</td> <td>40</td> </tr> <tr id="2"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> <tr id="3"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> <tr id="4"> <td><button class="button-border toggleModal"> <span class="icon"></span> Timesheet Approval</button></td> <td>EmployeeNum</td> <td>EmployeeName</td> <td>ChargeNum</td> <td>Hours</td> </tr> </table> <div class="modal"> <header> <button class="close toggleModal">Close</button> </header> <section> <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p> </section> <button class="button-border button-success toggleModal"> <span class="icon"></span> Approve </button> <button class="button-border button-error pull-right toggleModal"> <span class="icon">< </span> Disapprove </button> <!-- <script> $(docuemnt).ready(function(){ --> <!-- var rowCount = $('table#tableId tr:#a').index() + 1; --> <!-- $("#a").style.color = "red"}); --> <!-- </script> --> </div> </body> </html> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM