將JS應用到加載頁面後創建的表格中

我有一個html頁面，您可以在其中將文本放入textarea，單擊一個按鈕然後創建一個html表格。問題是，我使用的JS文件使我的表可排序，但此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; 
}

來源

2016-01-07 Fynn

後的代碼，這兩個排序表，以及如何被調用，並創建您的新表的代碼。 – LGSon

['DOMContentLoaded']（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）。 – Script47

我的意思是你的代碼/腳本，你如何實現它，你的代碼如何調用sort方法，它被調用的位置/時間以及它如何將新表插入到DOM中。 – LGSon

所以這是一個建議，因爲你的代碼的主要部分不可用。

在現有的代碼，在其中創建新表，你需要添加/運行以下命令：

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

來源

2016-01-07 12:18:59 LGSon

這對我來說非常合適，謝謝！ – Fynn

將JS應用到加載頁面後創建的表格中

回答

相關問題