0

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

这是列表框的代码：

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

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

PS当你有多行代码时，把它全部去掉，突出显示它并按comment+k，`是内联代码。

于 2012-11-16T02:37:08.343 回答
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 回答