0

約50行のテーブルがあります。各行の最後のセルは画像であり、クリックすると、その特定の行の各セルにテキストボックスが表示されるため、ユーザーは値を編集できます。このために、画像をクリックするだけでJavascriptを記述しました。その特定の行に目を通し、各tdのinnerHTMLを変更してテキストボックスを作成します。

function insertEdittableRow(ids){  
     var row = $(ids).closest("tr");

     var tdvar = row.find('td[class=mainServer]')[0];

      var servname = tdvar.innerHTML.trim();

      tdvar.innerHTML = "'<'INPUT id=updServerName class=TextBoxStyle value='" + servname 
                +"' type=text name=updServerName/> ";

    }

これは正常に機能します。私がやりたかった2番目のステップはソートでした。

テーブルのヘッダーをクリックすると、テーブルが並べ替えられます。そして、ソートJavaScriptは次のようになります。すべての行を取得し、それを古いインデックス（行番号）の配列に入れて、並べ替えを実行します。次に、配列をループして、新しいソートされたtbodyを作成します。テーブルの古いソートされていないtbodyは、この新しいソートされたtbodyに置き換えられます。

    for(var i=0, len=arrayOfRows.length; i'<'len; i++) {
       newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
    }

    table.replaceChild(newTableBody,tbody);

これも問題なく動作します。

しかし、問題は、最初の部分で説明したように、最後のセルの画像ボタンをクリックしても機能しないことです。そのjavascript関数にデバッガーを配置すると、そこにヒットしてテキストが形成され、最後のtdのinnerHTMLに割り当てられますが、ページにテキストボックスが表示されません。

要約すると、テキストボックスは並べ替えの前にinnerHTMLとして挿入されますが、cloneNodeで並べ替えを行い、新しい並べ替えられたtBODYを作成してテーブルに挿入した後、innerHTMLの割り当てが機能しません。

どんな助けでも大歓迎です。

4

1 に答える 1

0

回避策として、ソート中にcloneNodeの実行を停止しました。代わりに、行の各セルに対してcreateElementとappendChildを実行し、行をtbodyにappendChildしました。

于 2012-09-20T14:20:55.280 に答える