0

リストを表示するには2つの列が必要だったので、テーブルごとにリストボックスを作成しました。そして、リストボックスにヒットしたときにテーブル内のテキストを編集しようとしています。リストをクリックすると、選択したリストが編集可能なボックスのようなものに変更されるので、表示される他のボックスにテキストを配置せずにテキストを直接編集できます。これを行う方法はありますか??

リストボックスのコードは次のとおりです。

$(document).ready(function () {
   $('div#selReporterList table tr:has(td)').click(function() {
     $('.selected').removeClass('selected');
     $('.selected').addClass('deselected');
     $(this).addClass('selected'); 
   });  
});

テーブルはここにあります：

<div id="selReporterList" class="srList">
  <div>
    <table id="list" cellspacing="0" border="1" style="border-collapse:collapse;" ndblclick="edit()">
      <tr>
        <td id="a" class="1" value="apple">apple</td>
        <td id="b" class="2" value="good">good</td>
      </tr>
      <tr>
        <td id="a" class="1" value="banana">banana</td>
        <td id="b"class="2" value="very good">very good</td>
      </tr>
    </tr>
    </table>
  </div>
</div>
4

2 に答える 2

1 
    <div id="selReporterList" class="srList">
        <div>
            <table id="list" cellspacing="0" border="1" onclick="changeTableModeToEdit(true)" ondblclick="changeTableModeToEdit(false)" style="border-collapse:collapse;" ndblclick="edit()">
                <tr>
                    <td id="a" class="1" value="apple"><span>apple</span></td>
                    <td id="b" class="2" value="good"><span>good</span></td>
                </tr>
                <tr>
                    <td id="a" class="1" value="banana"><span>banana</span></td>
                    <td id="b"class="2" value="very good"><span>very good</span></td>
                </tr>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        function changeTableModeToEdit(toEditMode){
            var value;
            if(toEditMode)
            {
                $('#list span').each(function(){
                    value = $(this).text();
                    $(this).after('<input type="text"/>');
                    $(this).next().val(value).focus();          
                    $(this).remove();
                });
            }
            else
            {
                $('#list input').each(function(){
                    value = $(this).val();
                    $(this).after('<span> </span>');
                    $(this).next().text(value);         
                    $(this).remove();
                });
            }
        }
    </script>
于 2012-11-16T03:08:15.050 に答える
1

はい、テキストを の中に入れて、<input type=text editable="false" />クリックしたときにeditable属性を true に設定できます。

PS 複数行のコードがある場合は、すべて修正してハイライト表示し、commend+k を押します。` はインライン コード用です。

于 2012-11-16T02:37:08.343 に答える