模態按鈕添加到HTML錶行，而表數據被從JSON文件

Question

$('.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; 
 
\t \t \t border: 1px; 
 
     } 
 
th{ 
 
    font-weight:bold; 
 
      background-color:#ddd; 
 
     } 
 
     
 
td{ 
 
    padding:0.5em; 
 
      border:1px solid black; 
 
\t \t \t 
 
     } 
 
\t \t 
 
tr:nth-child(even) { 
 
    background-color: #ddd; 
 
\t 
 
} 
 
\t \t 
 
a.button { 
 
    -webkit-appearance: button; 
 
    -moz-appearance: button; 
 
    appearance: button; 
 

 
    text-decoration: none; 
 
    color: initial; 
 
} \t \t 
 

 
@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){ */ 
 
\t /* 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>

進口在這段代碼中我仍然有我原來的表信息。該片段由於某種原因無法正常工作，因此我添加了表格的屏幕截圖模式視圖。 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和2. This is the window that comes up after pressing the button

我知道肯定有辦法讓這段代碼更乾淨更好。在我嘗試清理代碼之前，有沒有辦法讓這些按鈕有效？這裏的最終目標是完全從HTML中刪除表格數據，並且只從json導入數據（當一切運行平穩時，這些數據將被db替代）

編輯：這是我正在使用的json代碼。我拿這個例子，試圖在我的表中實現它，所以這些字段不匹配。爲了給桌子上的按鈕留出空間，我將名字字段留空，我不確定這是否是正確的方法。

{ 
    "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 
    } 
    ] 
} 

Answer 1

我發佈了下面的代碼片段。我註釋掉了原來的$.getJson函數，並將people.json的內容加載到一個對象中。然後我通過迭代，使用jQuery創建按鈕和行，並將其附加到#userdata tbody。如果您有任何問題，請告訴我。

$('.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; 
 
\t \t \t border: 1px; 
 
     } 
 
th{ 
 
    font-weight:bold; 
 
      background-color:#ddd; 
 
     } 
 
     
 
td{ 
 
    padding:0.5em; 
 
      border:1px solid black; 
 
\t \t \t 
 
     } 
 
\t \t 
 
tr:nth-child(even) { 
 
    background-color: #ddd; 
 
\t 
 
} 
 
\t \t 
 
a.button { 
 
    -webkit-appearance: button; 
 
    -moz-appearance: button; 
 
    appearance: button; 
 

 
    text-decoration: none; 
 
    color: initial; 
 
} \t \t 
 

 
@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){ */ 
 
\t /* 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>