将JS应用到表上，该表是在加载页面后创建的

Question

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

我的问题似乎是这样的：在页面加载后创建的新元素上应用jquery属性但是我不能使用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引用可以直接从现有代码中获得，也可以在将新表添加到DOM后调用document.getElementById(idOfTheTableIJustAdded)。

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