从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 文件构造的
相关标签