将 JS 应用到页面加载后创建的 table

Question

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

我的问题好像是这个问题： Apply jquery propieties on new element created after the page is loaded 但是我不能使用JQuery，没有它有什么办法吗？

创建的示例 table：

<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

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

在您创建新 table 的现有代码中，您需要 add/run 以下内容：

sorttable.makeSortable(newTableObject);

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

来源：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);
}

将 JS 应用到页面加载后创建的 table

Apply JS onto table, which is created after page is loaded

html

javascript

jquery

sorttable.js