HTML-Code:Modale Taste funktioniert nur für jede zweite Zeile, was macht es nicht für jede Zeile funktioniert?
<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");
$('.toggleModal').on('click', 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>
CSS-Code:
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;
}
Json-Code, der in Tabellendaten bringt: geschieht
{
"person": [
{
"firstName": " ",
"lastName": "Kent",
"job": "Reporter",
"roll": 20,
"hours":10
},
{
"firstName": " ",
"lastName": "Wayne",
"job": "Playboy",
"roll": 30,
"hours":20
}
]
}
Was ist, dass Sie die Taste, die ich am Anfang bin mit der Reihe wird nur für jede andere Reihe funktionieren. Die Schaltfläche ermöglicht es der Person im Wesentlichen, die Daten in einer bestimmten Zeile zu akzeptieren oder abzulehnen, sodass die Schaltfläche für jede Zeile benötigt wird. Die Tabelle muss dynamisch sein, um Informationen von einer anderen Quelle als der lokalen HTML-Seite einzulesen. Wenn ich 3 Tabellenzeilen hinzufügen würde, funktionieren nur zwei der drei Schaltflächen, und selbst dann wird die modale Ansicht manchmal nicht mehr funktionieren. Zum Beispiel, sobald der Knopf gedrückt wird, erscheint eine modale Ansicht mit zwei anderen Knöpfen und genau jetzt, wenn Sie eine dieser Knöpfe anklicken, wird die Ansicht geschlossen. Wenn Sie jedoch mehr Zeilen hinzufügen, wenn Sie auf die Schaltfläche in der ersten Zeile klicken, funktionieren die Schaltflächen in der modalen Ansicht (die nach dem Klicken auf die Schaltfläche in der Tabellenzeile angezeigt werden) nicht. Und das ist oben auf der ersten Schaltfläche, die nur für jede zweite Zeile funktioniert.
Hoppla, ich habe versehentlich eine ältere Version meines Codes hochgeladen. Ich habe die von Ihnen vorgeschlagenen Änderungen bearbeitet und vorgenommen, habe aber immer noch das gleiche Problem. – Durango
Meine Entschuldigung, Sie hatten Recht, ich habe einen kleinen Syntaxfehler gemacht. Vielen Dank für die schnelle Antwort. – Durango
Super! Froh, dass es geholfen hat. Vergessen Sie nicht, die Frage als beantwortet zu markieren, damit andere wissen, dass Sie gefunden haben, wonach Sie suchen. – Jonathan