如何將列表框更改爲可編輯框？

我按表格製作了一個列表框，因爲我需要兩列來顯示列表。和，我試圖編輯表中的文本，當我點擊列表框。我的意思是，當我點擊一個列表時，所選列表會變成類似於可編輯框的東西，所以我可以直接編輯文本，而不會在出現的另一個框上放置文本。有沒有辦法做到這一點？如何將列表框更改爲可編輯框？

這裏是列表框代碼：

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

來源

2012-11-16 Albright

<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-16 03:08:15

是的！這與我想要的相似！你能教我如何直接編輯表格中的文字嗎？ – Albright

對不起。我無法得到它。你能多解釋一下嗎？ ;） –

@ Akhil Sekharan我跑你的代碼，看到桌子。你得到這張桌子。舉例來說，當我點擊桌面上的「蘋果」時，它會改變爲編輯單詞，所以我可以寫一些像「胡蘿蔔」這樣的詞。之後，我可以看到「胡蘿蔔」而不是「蘋果」。 – Albright

是的，你可以把文本的<input type=text editable="false" />內，然後當用戶點擊設置在editable屬性爲true。

P.S.當你有多行代碼時，請將它全部加亮，突出顯示它，然後按commend + k， `用於內聯代碼。

來源

2012-11-16 02:37:08 OneChillDude

你的意思''然後刪除屬性'readonly'？ – nrodic

非常感謝。我想知道我可以在輸入兩列？我想在多行看到他們。是否有可能使多個輸入來查看列表？ – Albright

@nrodic no，我的意思是編輯列表框上的文本與likt onclick事件 – Albright

如何將列表框更改爲可編輯框？

回答

相關問題