我使用 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];
}
}最佳答案
您可以直接在后端的 .ejs 文件中编辑和应用您的逻辑，因为您的客户端解决方案似乎是在 Tablesorter 初始化表之后运行的。您还可以尝试实现您的客户端解决方案，首先将行添加到表中，然后初始化 Tablesorter。祝你好运!
关于javascript - 如何在 javascript/node.js 中的 HTML tablesorter 表体中插入行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41950458/