0

次のような非常に大きなhtmlテーブルがあります。

<table>
    <tr>
        <td>value1</td>
        <td>value2</td>
    </tr>
    <tr>
        <td>value3</td>
        <td>value4</td>
    </tr>   
</table>

値ごとに、ユーザーがクリックして値を変更できるドロップダウンが必要です。これにより、ajax関数がトリガーされます。これを行うための最良の方法は何でしょうか？それぞれのドロップダウン？位置を変更する1つのドロップダウン？これを追加するにはどうすればよいですか？

4

4 に答える 4

1

このソリューションは、クリックするとセルをドロップダウンに変更し、値が選択されると、これが望ましい効果である場合に備えてセルに戻ります。

于 2012-06-26T21:53:31.253 に答える
1

これに似た何か、私は推測します。:)私はjQueryを使用しました。:)

$("tr").each(function(){
    $("td").each(function(){
        var before = $(this).text();
        $(this).html("<select><option>"+before+"</option></select>");
    });
});​

jsFiddleの例

于 2012-06-26T21:30:51.757 に答える
1

これの一部は、ユーザーに求めるエクスペリエンスによって異なりますが、各テーブルセルにselect要素を配置することに傾倒します。次に、ユーザーが変更する値の1つを選択するまで選択を非表示にするか、選択要素を常に表示することができます。ブラウザがページをレンダリングする前に選択ボックスに値を入力できるため、これは簡単です。これが使用できない場合、たとえば、マークアップのサイズが原因でブラウザがページのレンダリングに問題がある場合は、単一の選択要素の使用に移行できます。

単一の選択ボックスを使用する場合は、それを正しいセルに移動する必要があります。また、選択ボックスに可能な値を取得する方法も決定する必要があります。tdタグのdata属性を使用してデータを保存するか、ajax呼び出しを行うことができます。ただし、セルを編集する必要があるたびにサーバーに戻ると、おしゃべりになる可能性があります。基本的に、これは正しく行うのが難しいオプションです。

簡単な方法から始めます（各tdで選択します）。そして、それが問題であることが判明した場合は、より難しいものに移ります。それが私がすることです。

于 2012-06-26T21:39:16.593 に答える
0

了解しました。動作しました。これは私の他の答えに代わるものです。これにより、各trがドロップダウンになり、tdsがオプションになります。jQueryを使用しました。

$("tr").each(function(i){   
    $("td").each(function(){
        $(this).replaceWith("<option>"+$(this).text()+"</option>");
    });
    $(this).replaceWith("<select>"+$(this).html()+"</select>");    
});

jsFiddleの例を更新

于 2012-06-26T21:51:45.373 に答える