how to change list box to editable box?

Question

I made a listbox by table because I needed two column to show list. and, I am trying to edit the text in the table when I hit the listbox. I mean the selected list is changed to something like edtitable box when I click a list, so I can edit the text directly without putting a text on the other box that comes up. Is there a way to do this??

here is the code for the listbox:

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

the table is here:

<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

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

Answer 2

Yes, you could put the text inside of an <input type=text editable="false" /> and then when it is clicked set the editable attribute to true.

P.S. when you have multiple lines of code, right it all out, highlight it and press commend+k, the ` is for inline code.