2017-05-19 13 views
0

編集可能な表を作成したい。そこでは、私はテーブルのセルの内容を変更することができます。単純な入力は正常に機能していますが、ドロップダウンまたは選択が機能していません。ここに私が何をしたかのサンプルがあります。私は編集可能な表のセルにドロップダウンリストが表示されない

  • ドロップダウンやオプションに直面しています

    $(function() { 
     
        $("td").click(function() { 
     
         var OriginalContent = $(this).text(); 
     
         console.log(OriginalContent); 
     
         $(this).addClass("cellEditing"); 
     
         $(this).html("<select><option>1</option><option>2</option><option >3</option></select>"); 
     
         $(this).children().first().focus(); 
     
    
     
         $(this).children().first().keypress(function(e) { 
     
          if (e.which == 13) { 
     
           var newContent = OriginalContent; 
     
           $(this).parent().text(OriginalContent); 
     
           $(this).parent().removeClass("cellEditing"); 
     
           console.log('value' + $(this).val()); 
     
          } 
     
         }); 
     
         $(this).children().first().blur(function() { 
     
          $(this).parent().text(OriginalContent); 
     
          $(this).parent().removeClass("cellEditing"); 
     
         }); 
     
        }); 
     
    });
    .editableTable { 
     
        border:solid 0px; 
     
        width:100%; 
     
        text-align:center 
     
    } 
     
    .editableTable td { 
     
        border:solid 1px; 
     
    } 
     
    .editableTable .cellEditing { 
     
        padding: 0; 
     
    } 
     
    select{ 
     
        border:0px; 
     
        border-color:none 
     
    } 
     
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    <table class="editableTable"> 
     
         
     
         <tbody> 
     
          <tr> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
          </tr> 
     
          <tr> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
          </tr> 
     
          <tr> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
           <td>0</td> 
     
          </tr> 
     
         </tbody> 
     
        </table>

    問題は適切に表示されないと、私は二度、それらをクリックしたときには、すべてのオプションを取り、それらをマージし、に設定します元の値。

iはセルがクリックされたときにのみ表示されますここに

  • オプションが、オプションまたはドロップダウンで編集可能なテーブルが必要なもの。

  • Enterキーを押すと、新しい値がコンソールに表示され、元の値がそのセルに残ります。

  • 可能であれば、ドロップダウンやオプションをドロップダウンやオプションのように表示しないでください。右矢印は表示しないでください。

  • セルをクリックした後、セルの幅を変更しないでください。

私はこれを行うための良い方法を見つけるか、ここで間違っていると教えてください。前もって感謝します。

答えて

0

のカスタムボタンを設定する必要があります。テーブルの機能を編集してください。 コード内で最初にtdをクリックすると、クリックイベントが発生します。 また、その時にドロップダウンをクリックしたときにもtdをクリックしてイベントを起動します。そのドロップダウンオプションが正しく表示されないため、 が表示されます

+0

ご回答いただきありがとうございますが、カスタムボタンを編集可能にする必要はありません。私はダブルクリックでセルを編集可能にすることでそれらを区別させ、次にドロップダウンが現れ、私が入力またはタブを押すまでそこにとどまります。 –

関連する問題