javascript - 将 JS 应用到页面加载后创建的表上

Question

我有一个 html 页面，您可以在其中将文本放入文本区域，单击按钮，然后创建一个 html 表格。问题是，我正在使用 JS 文件使我的表可排序，但此 JS 文件不适用于创建页面本身后创建的表。单击按钮并创建表后如何再次调用 JS 文件？或者有没有其他方法将JS文件应用到新表？

我的问题似乎是这样的: Apply jquery propieties on new element created after the page is loaded但是我不能使用JQuery，有什么办法不用它吗？

创建表的示例:

<div id="artikelnr2">
<meta http-equiv="content-type" content="text/html; charset=utf-8">


<link rel="stylesheet" type="text/css" href="table.css">
<script src="java.js"></script>

        <div class="datagrid"><table class="sortable">
        <thead><tr><th>Nummer</th><th>Nummer</th><th>Bezeichnung</th><th>Bemerkungen</th></tr></thead>
        <tbody>
    <tr><td>897-251</td><td>00.702.07803.7</td><td>5G2</td><td>-</td></tr><tr><td>897-1051</td><td>00.702.0306.7</td><td>5G1</td><td>-</td></tr><tr><td>897-1651</td><td>00.702.0307.3</td><td>5G1U</td><td>-</td></tr><tr><td>897-341</td><td>00.702.0323.9</td><td>5G2.5</td><td>-</td></tr>
        </tbody>
        </table></div>
</div>

我正在使用此页面中的 sorttable.js: http://www.kryogenix.org/code/browser/sorttable/

单击按钮后调用的 JavaScript(将另一个页面的内容粘贴到现有的 div 容器中):

    function getOutput(url) {  
var file = selectedValue()+".csv";
var value = document.getElementById("artikelnr").value;
<!---Leerzeichen entfernen-->
value = myTrim(value); 
var url = url || "verarbeitung.php?eingabe="+value+"&eingabe2="+file ; 

  getRequest(
      url, // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  return false;
}

// handles drawing an error message
function drawError() {
    var container = document.getElementById('artikelnr2');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('artikelnr2');
    container.innerHTML = responseText;
    tempResult = responseText; 
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ? 
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}

Answer 1

因此这是一个建议，因为您的代码的主要部分不可用。

在创建新表的现有代码中，您需要添加/运行以下内容:

sorttable.makeSortable(newTableObject);

newTableObject您可以直接从现有代码中获取引用，也可以通过调用 document.getElementById(idOfTheTableIJustAdded) 获取引用将新表添加到 DOM 后。

来源:http://www.kryogenix.org/code/browser/sorttable/

问题编辑后更新:

在这个脚本函数中你应该能够这样做

function drawOutput(responseText) {
    var container = document.getElementById('artikelnr2');
    container.innerHTML = responseText;
    //tempResult = responseText;

    var newTableObject = container.querySelector(".sortable");
    sorttable.makeSortable(newTableObject);
}