javascript - jquery編集可能テーブル:特定のセルを編集可能にするにはどうすればよいですか?

原文 javascript jquery

私は楽しみのためにjqueryで編集可能なテーブルを構築しています。

これが私のテーブルです:

<table id="horiz-min" summary="Indices">
    <thead>
    <tr>
        <th scope="col"></th>
        <th scope="col">ID</th>
        <th scope="col">Description</th>
        <th scope="col"></th>
        <th scope="col"></th>
        <th scope="col"></th>
    </tr>
    </thead>
    <tbody>

        <tr onclick="show();" id="IDOL-FT">
            <td class="editable" id="edit">Edit</td> 
            <td class="edit-field">454</td>  
            <td class="edit-field">TEXTTEXTTEXTTEXT</td>
            <td class="editable">Details</td>
            <td class="editable">Feeds</td>
            <td class="editable">Fields</td>
        </tr>               

    </tbody>
</table>


最初に、編集をクリックして、IDと説明を編集可能にします。

したがって、JQUERYでは、これを置き換えて、これらのtdのコンテンツを現在編集可能なテキストボックス内のコンテンツに置き換えようとしています。

修正済み:しかし、「$が定義されていません」というコンソールエラーが表示される

jquery:

$('td.edit-field').replaceWith('<textbox></textbox>');
答え
"$ is not defined"は、jQueryをHTMLファイルに適切に含めていないようです。以下がHTMLファイルのヘッドセクションに表示されていることを確認します(バージョンを適切に調整します)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>


さらに、jQueryを使用しているため、ハンドラーを直接HTMLに割り当てることは避け、代わりにjQueryフックアップを使用する必要があります。例えば

$(document).ready(function() {
  $('#IDOL-FT').click(function() {
    show();
  });
});
関連記事

javascript - FlashオブジェクトがフルスクリーンモードであることをJavaScriptから確認する方法

javascript - jqueryを使用して、入力テキストボックスに基づいて使用可能なオプションを変更および表示[削除/追加]

javascript - キャンバスのサイズが相対的な場合、キャンバス上の正しいマウス位置を取得しますか?

javascript - jqueryを使用して更新を表示する

javascript - JSONオブジェクトの親ノードへのアクセス

javascript - アニメーションをバックグラウンドで別の要素の背後に保持するにはどうすればよいですか?

javascript - JavaScriptのlocalstorage文字列はどこに保存されますか?

c# - ASP.NET JavaScriptを使用して、コントロールのリスト内の各コントロールのIDを取得します

javascript - Android Webkitで動作するJavaScriptデバッガー

javascript - 値が正しい量を加算/減算していない、およびif / elseステートメントのバグ