如何在javascript / node.js中的HTML tablesorter表主体中插入行？
[英]How to insert row in HTML tablesorter table body in javascript/node.js?
问题描述
我已经使用html / css / javascript / node.js / express / tablesorter为我的公司应用程序制作了功能测试工具。
我的测试工具已成功执行功能测试。
我的表格样式来自开源的“ Tablesorter”。
这是编辑屏幕。 该文件为.ejs格式。 因此，Node.js服务器将文件动态呈现为html。
但是，我想知道如何在此表中另外插入行。 因此，我进行了搜索以解决此问题，并获得了如下解决方案。
for (var i in rList) { var table = document.getElementById("ID_Table"); var row = table.insertRow(-1); var cell1 = row.insertCell(-1); var cell2 = row.insertCell(-1); var list = rList[i].split(" "); cell1.innerHTML = list[0]; cell2.innerHTML = list[1]; }
但是，这种方式是不完整的。 结果是这样的。
'tablesorter'样式不适用于其他行。 我不知道该怎么解决。
<!DOCTYPE html> <html> <head> <!-- Character Set --> <meta charset="utf-8"> <!-- Title --> <title><%= title %></title> <!-- Style --> <link rel='stylesheet' href='/stylesheets/style.css'/> <!-- JS --> <script src="/javascripts/indexCore.js"></script> <!-- jQuery --> <script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script> <script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script> <!-- Tablesorter: theme --> <link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css"> <link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css"> <link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css"> <link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css"> <link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css"> <link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css"> <link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css"> <link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css"> <link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css"> <!-- Tablesorter script: required --> <script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script> <script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script> <script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script> <script id="js"> $(function(){ /* make second table scroll within its wrapper */ $('#ID_Table').tablesorter({ widthFixed : true, headerTemplate : '{content} {icon}', // Add icon for various themes widgets: [ 'zebra', 'stickyHeaders', 'filter' ], widgetOptions: { // jQuery selector or object to attach sticky header to stickyHeaders_attachTo : '.wrapper' // or $('.wrapper') } }); $("#ID_Table tbody").click(function () { //$(this).addClass('selected').siblings().removeClass('selected'); //alert('a'); }); }); </script> <script> $(function() { //이 부분은 렌더링 되자마자 실행되는 부분 window.includeCaption = true; $('.caption').on('click', function(){ includeCaption = !includeCaption; $(this).html( '' + includeCaption ); $('#ID_Table').each(function(){ if (this.config) { this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption; this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption); } }); }); // removed jQuery UI theme because of the accordion! $('link.theme').each(function(){ this.disabled = true; }); var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서 i, o = '', t = themes.split(' '); for (i = 0; i < t.length; i++) { o += '<option value="' + t[i] + '">' + t[i] + '</option>'; } $('select:first') .append(o) .change(function(){ var theme = $(this).val().toLowerCase(), // ui-theme is added by the themeswitcher files = $('link.theme').each(function(){ this.disabled = true; }) files.filter('.' + theme).each(function(){ this.disabled = false; }); $('table') .removeClass('tablesorter-' + t.join(' tablesorter-')) .addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) ); }).change(); }); </script> </head> <body> <div id="header"> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <a href="/screenMain" id="screenMain">Main</a> <a href="/screenEdit" id="screenEdit">Edit</a> <a href="/" id="screenBlank">Blank</a> <hr/> </div> <div id="wrap"> <div id="Main_Screen"> <input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input> <input type="button" value="수행" id="btn1" onclick="Automation()"></input> <button type="button">결과 리스트 출력</button> </div> <div id="List_Screen" class="narrow-block wrapper"> Theme: <select></select> <table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1"> <thead> <tr> <th>Function</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </body> </html>
这是我的.ejs文件。
而且，这是indexCore.js中的printResult函数。
function printResult(){ var rList = resultList.split('\\n'); for (var i in rList) { var table = document.getElementById("ID_Table"); var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var list = rList[i].split(" "); cell1.innerHTML = list[0]; cell2.innerHTML = list[1]; } }
1 个解决方案
解决方案1
3 已采纳 2017-01-31 06:10:59
您可以直接在后端在.ejs文件中编辑和应用逻辑，因为客户端解决方案似乎在Tablesorter初始化表之后运行。 您也可以尝试实现客户端解决方案，首先将行添加到表中，然后初始化Tablesorter 。 祝好运！
使用 node.js 和 JavaScript 从 HTML 简单表单插入 INTO MySQL 表
[英]Insert INTO MySQL Table from HTML simple form using node.js and JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.