從json文件導入表格數據時，將“模式”按鈕添加到html表格行
[英]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>
在此代碼中，我仍然有原始的表信息。 由於某些原因，該代碼段無法正常工作，因此我將表格的屏幕截圖添加為模式視圖。 1.帶有按鈕的表視圖轉到帶有在html文件中聲明的用戶的行，而空白行是從json文件導入的用戶，並且2.這是按下按鈕后出現的窗口
我知道絕對有一種方法可以使此代碼更簡潔。 在嘗試清理代碼之前，有沒有辦法使這些按鈕起作用？ 最終目標是從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
}
]
}
1 個解決方案
解決方案1
0 2017-07-19 17:43:20
我在下面發布了一個代碼段。 我注釋掉了原始的$.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; 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>
如何使用C＃將動態添加的行中的數據保存到（csv / txt）文件到HTML表格？
[英]How to save data to a (csv/txt) file from dynamically added rows to a HTML table using C#?
如何在 javascript 中添加按鈕，因為在 html 表中導入的數據來自 JSON 文件
[英]how to add button in javascript since the data that import in the html table is from JSON file
在將JSON數據綁定到HTML表Jquery的同時，從JSON綁定每個表列（標題）的選擇下拉列表
[英]Bind select dropdown for each table column (Head) from JSON, while binding JSON data to HTML table Jquery
如何通過請求將數據添加到另一HTML頁面的行中來向一個HTML頁面的表中添加行（可能使用“提示”和javascript）？
[英]How to add rows to table in one HTML page by asking for data to be added into rows from another HTML page (may be using “prompt” & javascripts)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用 JSON 文件中的數據在 HTML 表中創建多行
如何使用C＃將動態添加的行中的數據保存到（csv / txt）文件到HTML表格？
刪除添加的html表行
如何在 javascript 中添加按鈕，因為在 html 表中導入的數據來自 JSON 文件
我想將 json 文件中的 JSON 數據調用到 html 表
我想使用從JSON文件導入的數據創建表
從json文件解析的html表中過濾數據
在將JSON數據綁定到HTML表Jquery的同時，從JSON綁定每個表列（標題）的選擇下拉列表
如何通過請求將數據添加到另一HTML頁面的行中來向一個HTML頁面的表中添加行（可能使用“提示”和javascript）？
表不是從本地 json 文件構造的
相關標簽