編集可能なHTMLテーブルを作成する

Question

私は、編集可能なテーブルを作成してHTMLテーブルのエントリをダブルクリックするというprofの例に従おうとしています。だから、私のデータの方法は、次のようになります。

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

私はその属性はクラスのあるタグに（）関数の編集をバインドする「編集可能」。その後、私の編集機能は次のようになります。

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が必要です。彼らはテーブルエントリをダブルクリックするので、その値の要素が私に与えられますが、IDは持っていません。私はそのid値を持つURLとDESCのためのウェブサーバを頼むことができるので、そのよう

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

：私は私のformatDataの2行を変更しますか？それは今、2人が同じIDを持っているので悪い方法だと思われますが、私はAJAX、HTML、Javascriptに比較的新しいので、よく分かりません。ありがとう。

Answer 1

ええと、私はちょっとした助けをあなたの方法で押します。

基本的に、私が収集したものから、それぞれtdタグに関数をバインドしています。editableです。さて、その関数内のIDを調べることができます。あなたは現在のノードのparentNodeを選択することができ、編集されている、とそのように、最初のtdあるべきparentNode.firstChildをそののparentNodeのfirstChildを選択し、以降の各行にごtd「のそれぞれを覚えcは

B/sがあります単一の親tr。次に、それが含むテキストノードであるそのtdノードのfirstChildを選択し、その値であるidを取得します。だからparentNode.firstChild.firstChild.nodeValue

これはあなたのコードを正確に示していない可能性があります。その部分だけを表示していますが、これはアイデアの要点です。基本的にはDOMを介してノードを選択し、現在のコンテキストに基づいて正しいノードを引っ張ります。

私はあなたがそれを得るまでそれを持ち歩くことを勧めます。

これは、あなたがまだ立ち往生しているかどうかを考えるための少しのサンプルコードです。それは簡単なことです。

基本的に、それぞれの中央の列には、イベントのonfocusイベント（入力内をクリック）のタグが付けられています。だから、入力自体にだし、それはのparentNode tdを引き出し、その後、その後、次のparentNode tr、その行にinputである第一tdの最初td、その後のfirstChildあるtrのその後のfirstChild、最終的にはそのinput "値の属性。

<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>