Question

我試圖按照教授的示例創建一個可編輯的表，雙擊HTML表中的一個條目。因此，我的數據方法如下所示：

function formatData(message) { 
    var str = "<table border=1>"; 
    for (var i = 0; i < message.length; i++) { 
     str += "<tr>" + "<td class='editable'>" + message[i].id + "</td>" + 
         "<td>" + message[i].name + "</td>" + 
         "<td class='editable'>" + message[i].url + "</td>" + 
         "<td class='editable'>" + message[i].desc + "</td>" + 
         "<td>" + "<a href='#' onclick='deleteRequest(this); return false' id='" + message[i].id +          "'>delete</a>" + "</td>" + 
         " + "</td>" + "</tr>"; 
    } 
    str += "</table>"; 
    return str; 
} 

我將一個函數edit（）綁定到其屬性類爲'editable'的標籤。然後我的編輯功能：

function edit(elm) { 
    /* check to see if we are already editing */ 
    if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT") 
    return; 

    /* save original content */ 
    var orig = elm.innerHTML; 

    /* create edit field */ 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = elm.innerHTML; 
    input.size = 20; 

    /* convert content to editable */ 
    elm.innerHTML = ''; 
    elm.appendChild(input); 

    /* position cursor and focus */ 
    if (input.selectionStart) 
    input.selectionStart = input.selectionEnd = 0; 
    else 
    { 
    var range = input.createTextRange(); 
    range.move("character", 0); 
    range.select(); 
    } 
    input.focus(); 

    /* set save trigger callback */ 
    input.onblur = function(){save(elm, input,orig);}; 
} 

我很困惑我將如何保存信息並將其傳遞到Web服務器進行更新。我需要id，url和desc來更新Web服務器。由於他們雙擊表格條目，只是給了我這個值的元素，但我沒有id。我將formatData中的兩行更改爲：

"<td class='editable' id='" + message[i].id + "'>" + message[i].url + "</td>" + 
"<td class='editable' id='" + message[i].id +"'>" + message[i].desc + "</td>" + 

這樣，我可以通過該id值詢問web服務器的url和desc嗎？這似乎是一個不好的方法來做到這一點，因爲現在兩個有相同的ID，但我不確定，因爲我相對較新的AJAX，HTML，Javascript。謝謝。

Answer 1

呃，我會按你的方式幫你一點。

基本上，從我收集的內容來看，每個td標記都與editable綁定了一個函數。那麼，你可以確定該函數內的id。

B/c可以選擇當前節點的parentNode正在編輯，然後選擇parentNode的firstChild，所以parentNode.firstChild這應該是第一td，因爲每行記住每個td「的旨意有單親家長tr。然後選擇該td節點的firstChild，它是包含的文本節點，然後獲取其值，即id。所以parentNode.firstChild.firstChild.nodeValue

這可能跟不上你的代碼，因爲你只顯示它的一部分......但這是主意。基本上通過DOM選擇節點並基於當前上下文來拉動正確的節點。

我會建議玩它直到你得到它。

這裏有一些示例代碼供您思考，如果您仍然陷入困境。它的意思是簡短的。

基本上，每個中間列在onfocus事件（在輸入內部單擊）上標記爲test函數。因此，它是輸入本身，它拉的parentNode td，那麼接下來parentNode tr，那麼tr這是第一td的第一td那麼則firstChild這是該行的input，最後是input的則firstChild「 s價值屬性。

<script> 
function test(elem) { 

    alert(elem.parentNode.parentNode.firstChild.firstChild.value); 
} 
</script> 

<table> 
<tr><td><input value="1"/></td><td><input value="stuff" onfocus="test(this)"/></td><td>other stuff</td></tr> 
<tr><td><input value="2"/></td><td><input value="stuff3" onfocus="test(this)"/></td><td>other stuff</td></tr> 
<tr><td><input value="3"/></td><td><input value="stuff2" onfocus="test(this)"/></td><td>other stuff</td></tr> 
</table>