0
Ich habe ein Funktionstest-Tool für meine Firma App mit html/css/javascript/node.js/express/tablesorter gemacht.Wie Zeile in HTML-TabellenOrter Tabellenkörper in Javascript/node.js einfügen?
Mein Test-Tool wurde erfolgreich die Funktionstests durchgeführt.
Meine Tabelle Stil ist von Opensource 'Tablesorter'.
Dieser Bearbeitungsbildschirm. Die Datei ist das .ejs-Format. Der Node.js-Server rendert die Datei daher dynamisch in HTML.
Aber ich frage mich, wie Sie die Zeile zusätzlich in dieser Tabelle einfügen. Also habe ich gesucht, um das Problem zu lösen und habe eine Lösung wie unten.
\t for (var i in rList) {
\t \t var table = document.getElementById("ID_Table");
\t \t var row = table.insertRow(-1);
\t \t var cell1 = row.insertCell(-1);
\t \t var cell2 = row.insertCell(-1);
\t \t var list = rList[i].split(" ");
\t \t cell1.innerHTML = list[0];
\t \t cell2.innerHTML = list[1];
\t }Aber diese Art und Weise ist unvollständig. Das Ergebnis ist so.
Die 'tablesorter' Stil wird auf zusätzliche Zeilen nicht angewendet. Ich weiß nicht, wie ich das lösen soll.
<!DOCTYPE html>
<html>
<head>
\t <!-- Character Set -->
\t <meta charset="utf-8">
\t <!-- Title -->
\t <title><%= title %></title>
\t
\t <!-- Style -->
\t <link rel='stylesheet' href='/stylesheets/style.css'/>
\t
\t <!-- JS -->
\t <script src="/javascripts/indexCore.js"></script>
\t <!-- jQuery -->
\t <script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script>
\t <script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script>
\t \t
\t <!-- Tablesorter: theme -->
\t <link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css">
\t <link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css">
\t <link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css">
\t <link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css">
\t <link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css">
\t <link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css">
\t <link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css">
\t <link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css">
\t <link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css">
\t <!-- Tablesorter script: required -->
\t <script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script>
\t <script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script>
\t <script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script>
\t <script id="js">
\t $(function(){
\t \t /* make second table scroll within its wrapper */
\t \t $('#ID_Table').tablesorter({
\t \t \t widthFixed : true,
\t \t \t headerTemplate : '{content} {icon}', // Add icon for various themes
\t \t \t widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
\t \t \t widgetOptions: {
\t \t \t \t // jQuery selector or object to attach sticky header to
\t \t \t \t stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
\t \t \t }
\t \t });
\t \t
\t \t $("#ID_Table tbody").click(function() {
\t \t \t //$(this).addClass('selected').siblings().removeClass('selected');
\t \t \t //alert('a'); \t
\t \t });
\t });
\t </script>
\t <script>
\t $(function() { //이 부분은 렌더링 되자마자 실행되는 부분
\t \t window.includeCaption = true;
\t \t $('.caption').on('click', function(){
\t \t \t includeCaption = !includeCaption;
\t \t \t $(this).html('' + includeCaption);
\t \t \t $('#ID_Table').each(function(){
\t \t \t \t if (this.config) {
\t \t \t \t \t this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption;
\t \t \t \t \t this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption);
\t \t \t \t }
\t \t \t });
\t \t });
\t \t // removed jQuery UI theme because of the accordion!
\t \t $('link.theme').each(function(){ this.disabled = true; });
\t \t
\t \t var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서
\t \t \t i, o = '', t = themes.split(' ');
\t \t for (i = 0; i < t.length; i++) {
\t \t \t o += '<option value="' + t[i] + '">' + t[i] + '</option>';
\t \t }
\t \t
\t \t $('select:first')
\t \t \t .append(o)
\t \t \t .change(function(){
\t \t \t \t var theme = $(this).val().toLowerCase(),
\t \t \t \t \t // ui-theme is added by the themeswitcher
\t \t \t \t \t files = $('link.theme').each(function(){
\t \t \t \t \t \t this.disabled = true;
\t \t \t \t \t })
\t \t \t \t files.filter('.' + theme).each(function(){
\t \t \t \t \t this.disabled = false;
\t \t \t \t });
\t \t \t \t $('table')
\t \t \t \t \t .removeClass('tablesorter-' + t.join(' tablesorter-'))
\t \t \t \t \t .addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme));
\t \t \t }).change();
\t });
\t </script>
</head>
\t
<body>
\t <div id="header">
\t \t <h1><%= title %></h1>
\t \t <p>Welcome to <%= title %></p>
\t \t
\t \t <a href="/screenMain" id="screenMain">Main</a>
\t \t <a href="/screenEdit" id="screenEdit">Edit</a>
\t \t <a href="/" id="screenBlank">Blank</a>
\t \t <hr/>
\t </div>
\t
\t
\t <div id="wrap">
\t \t <div id="Main_Screen">
\t \t \t <input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input>
\t \t \t <input type="button" value="수행" id="btn1" onclick="Automation()"></input>
\t \t \t <button type="button">결과 리스트 출력</button>
\t \t </div>
\t \t
\t \t <div id="List_Screen" class="narrow-block wrapper">
\t \t Theme: <select></select>
\t \t <table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
\t \t \t <thead>
\t \t \t <tr>
\t \t \t \t <th>Function</th>
\t \t \t \t <th>Result</th>
\t \t \t </tr>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t <tr>
\t \t \t \t <td></td>
\t \t \t \t <td></td>
\t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t \t </div>
\t </div>
\t \t
</body>
</html>Das ist mein .ejs Datei.
Und dies ist printResult Funktion in indexCore.js.
function printResult(){
\t var rList = resultList.split('\n');
\t
\t for (var i in rList) {
\t \t var table = document.getElementById("ID_Table");
\t \t var row = table.insertRow(-1);
\t \t var cell1 = row.insertCell(0);
\t \t var cell2 = row.insertCell(1);
\t \t var list = rList[i].split(" ");
\t \t cell1.innerHTML = list[0];
\t \t cell2.innerHTML = list[1];
\t }
}
Umm ... Ich versuche, Ihren Hinweis zu verstehen, aber ich weiß nicht, wie das geht. – Fortuneman
könnten Sie mir den Hinweis mehr Details geben? PLZ. – Fortuneman
Sicher, bearbeiten Sie Ihre Frage und zeigen Sie mir Ihre .ejs Datei @Fortuneman – Mouneer