動態表onclick

Question

我有以下問題我想得到一些幫助。 有一個組合框（選擇），我選擇一個項目，我從PHP返回一個動態表。該表包含示例名稱。名字，姓氏和ID（隱藏）。當我點擊表格時，我得到了所選行的ID值。到目前爲止它工作正常。事件不希望首先發射的問題。之後，它工作正常，但我首先需要它，因爲我有一個功能，自動點擊第一行，但這不工作，直到我解決這個問題。我做了一個代碼，它可以很好地處理html表格。但不是與動態的。請幫忙。

下面是代碼工作正常DINAMIC表只是第2次點擊後：

function nametableclick() { 

    var rows = document.getElementById("nametable").rows; 
      for(var i = 0; i < rows.length; i++)   
     {       
      rows[i].onclick = function() 
     { 
        data=(this.cells[3].innerHTML);     

     var data = data; 

      $.ajax({ 
       type: "POST", 
       url: "list.php", 
       data: "data="+data, 
       Type: "json", 
       success: function(msg) { 

        msg = JSON.parse(msg); 
        $("#dob").html(msg.dob); 
        $("#age").html(msg.age); 
        $("#sex").html(msg.sex); 

       } 
      });    
      }; 

     };       
     }; 

這裏是代碼工作很好，但只是HTML表格： （其實是相同的，但我使用的onload）

onload = function() {  
    var rows = document.getElementById("nametable").rows; 
      for(var i = 0; i < rows.length; i++)   
     {       
      rows[i].onclick = function() 
     { 
        data=(this.cells[3].innerHTML);     

      var data = data; 

      $.ajax({ 
       type: "POST", 
       url: "list.php", 
       data: "data="+data, 
       Type: "json", 
       success: function(msg) { 

        msg = JSON.parse(msg); 
        $("#dob").html(msg.dob); 
        $("#age").html(msg.age); 
        $("#sex").html(msg.sex); 

       } 
      });   
     }; 
    }; 
    $("#nametable tr:eq(0) td:first-child").click();        
     }; 

當我使用dinamic表的onload函數它根本不工作。 感謝您提前提供任何幫助。

Answer 1

這個問題不適合答案。相反，我會做一些代碼分析。

onload = function() ... - 好不容易，但有點馬虎。也看起來這是可能的全局名稱空間泄漏。我會假設這應該是window.onload在這種情況下，我想知道爲什麼不使用jQuery的ready事件$(function() { ... })。

var rows = document.getElementById("nametable").rows; 
for(var i = 0; i < rows.length; i++) { 
    rows[i].onclick = function() { ... }; 
} 

好吧，現在再次從jQuery中逃離，就好像它患病了一些如何。然後循環遍歷行的數組，以便每次構建一個新函數並將它們附加到onclick（再次避免使用jQuery）？在循環內構建函數是一個非常糟糕的主意，大多數linters都會大聲抱怨。一個建議：

$('#nametable tr').on('click', function() { ... }); 

這將點擊處理程序附加到所有<TR>行在表與id="nametable"屬性。

data=(this.cells[3].innerHTML); 
var data = data; 

我的心跳過這裏！首先你把HTML的內容拉進（我認爲是全球變量），直到我看到下一行，並意識到我們有變量提升。但請等待你自己分配數據。最後，名稱data不提供關於innerHTML的內容的任何上下文。由於我沒有這些數據，我只能在這些例子中猜測，所以我會把它作爲數據。在將來考慮選擇提供其內容和使用的上下文的名稱。這樣，當你閱讀代碼時，你不必去尋找變量是什麼或者如何使用它們。

var data = $(this, 'td:eq(3)').text(); 

最後，使用的data是直接串聯成一個post請求。我會假設在該服務器API中不需要HTML。更不用說通過強制數據到字符串來避免jQuery的參數構建。而是使用一個JS對象：

$.ajax({ 
    type: 'POST', 
    url: 'list.php', 
    data: {data: data} // This is a very poorly designed server API 
}).then(function(data) { 
    ... 
}); 

而且，使用的Type: 'json'意味着你的服務器沒有返回正確的HTTP標頭。首先，沒有Type財產jQuery的阿賈克斯，而是我認爲你想要dataType。但是，需要dataType表明服務器沒有發送正確的標題。如果PHP腳本返回application/json而不是plain/text，那麼jQuery可以爲您解析響應，避免需要自行設置JSON.parse，這可能有點容易出錯。

$("#dob").html(msg.dob); 
$("#age").html(msg.age); 
$("#sex").html(msg.sex); 

使用html()您直接注入HTML到您從第三方收到的DOM被警告。這是一個很大的跨站腳本漏洞。使用text()代替將數據推送到DOM，除非您知道並可以斷言您的服務器的信任以及與其的連接（SSL以避免中間的人）。這個例子可能不重要，但仍然值得記住，因爲要在野外展示這些東西很容易。

$("#nametable tr:eq(0) td:first-child") 

當你有這樣的選擇是更容易和可讀性，而不是提供的，而不是依賴於DOM的彌補上下文掛鉤。將諸如class="clickable-row"或class="person-data dob"之類的內容添加到您的HTML標記中。它使維護和可讀性成爲可能。

Answer 2

感謝您的快速回復。我確定是否有很多錯誤，因爲我剛剛開始學習這個（我的意思是PHP的HTML AJAX等）幾周前，所以我沒有清楚地瞭解一切，我使用的東西，我不應該使用或應該做的另一種方式。但有一個簡單的程序，我想完成它並從中學習。所以當我不知道一些即時通訊試圖獲得一些信息（如：w3schools.com）或檢查其他類似的內容尋找。

對不起，我離開了那裏的

Var data = data; 

我的錯。不需要那裏。我之前正在嘗試一些東西並離開那裏。無論如何不會有任何不同。 onload = function（）{ 我在另一個主題中發現它是解決的結果，它適用於靜態表，但不適用於動態。 我試過以下。我沒有提到： window.onload = nametableclick;

功能nametableclick（）{這裏 數據}

但不與動態表工作的。

下一頁：

var rows = document.getElementById("nametable").rows; 
     for(var i = 0; i < rows.length; i++)   
     {       
      rows[i].onclick = function() 
      { 
       data2=(this.cells[3].innerHTML); 

它所做的，我發現所選擇的行和回來與3號（實際上4日）細胞是在我的PROG ID的值。我需要這個COS我想發送這個值到PHP來獲取表中的所有數據，其中ID =值。它工作正常。

正如我所提到的，編工作正常，即使它不是最好的方式來做到這一點。慢慢地，我會學習如何更好地做到這一點。但目前唯一的問題是動態表格onclick事件僅在第一次點擊後觸發。 謝謝並抱歉，如果我有點困難的情況下。:-)））

噢，還有一件事： 「首先，沒有類型屬性的jQuery的ajax，而是我認爲你想dataType。」

由於某種原因，如果我輸入dataType它根本不起作用。我不知道爲什麼。我觀看了一些培訓視頻，並閱讀了一些關於ajax的短期課程，其中一些使用dataType提到了一些簡單類型。我遵循了一切，但沒有爲我工作。我花了5個小時的時間去了解爲什麼其實我在這裏也有一個關於這個問題的話題。 get data from mysql with ajax and json into different textareas 而我無意中試了一次大寫字母T，它工作。不知道爲什麼。