The snippet does not work for the code. I am using Json to import the table data to be displayed by html. Within the table row there is a modal button, that when clicked a modal view popups with two more buttons(approve and disapprove). What I need to happen is when clicking approve or disapprove, the row that the button is correlated to is edited(if approved, row is removed from table view. if disapproved rows background color turns red.)
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('datasource/people.json', function(data) {
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td><button class='button-border toggleModal'><span class='icon'></span> Timesheet Approval</button></td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "<td>" + f.hours + "</td>" + " </tr>"
$(tblRow).appendTo("#userdata tbody");
$('#userdata').on('click', '.toggleModal', function (e) {
$('.modal').toggleClass('active');
});
});
});
});
</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>
</thead>
<tbody>
</tbody>
</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>
{
"person": [
{
"firstName": " ",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"hours":10
},
{
"firstName": " ",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"hours":20
},
{
"firstName": " ",
"lastName": "Scott",
"job": "PaperMan",
"roll": 20,
"hours": 40
}
]
}
~
