Question

我按表制作了一个列表框，因为我需要两列显示列表。并且，当我点击列表框时，我正在尝试编辑表格中的文本。我的意思是当我单击列表时，所选列表被更改为类似于可编辑框的内容，因此我可以直接编辑文本而无需在出现的另一个框上放置文本。有没有办法做到这一点??

这是列表框的代码：

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

Answer 1

是的，您可以将文字放在<input type=text editable="false" />内，然后点击它时将editable属性设置为true。

P.S。当你有多行代码时，把它全部拿出来，突出显示它并按下commend + k， `是内联代码。

Answer 2

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

如何将列表框更改为可编辑框？

2 个答案: