목록 상자를 편집 가능한 상자로 변경하는 방법은 무엇입니까?

목록을 표시하는 데 두 개의 열이 필요했기 때문에 목록별로 목록 상자를 만들었습니다. 그리고 목록 상자를 눌렀을 때 테이블의 텍스트를 편집하려고합니다. 목록을 클릭하면 선택한 목록이 edtitable 상자로 바뀌므로 다른 상자에 텍스트를 삽입하지 않고 직접 편집 할 수 있습니다. 이렇게 할 수있는 방법이 있습니까 ??목록 상자를 편집 가능한 상자로 변경하는 방법은 무엇입니까?

$(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. 여러 줄의 코드를 가지고있을 때, 모든 것을 바로 꺼내 강조 표시하고 commend + k를 누르면 인라인 코드입니다.

출처

2012-11-16 02:37:08 OneChillDude

''을 의미하고'readonly' 속성을 제거합니까? – nrodic

정말 고마워요. 내가 입력에서 두 개의 열을 만들 수 궁금하네요 ?? 여러 줄로보고 싶습니다. 목록을보기 위해 여러 입력을 할 수 있습니까 ?? – Albright

@nrodic 아니오, likt onclick 이벤트로 목록 상자의 텍스트를 편집하는 것을 의미합니다. – Albright

목록 상자를 편집 가능한 상자로 변경하는 방법은 무엇입니까?

답변

관련 문제