ContentEditableをHTMLテーブルに挿入する

$ scheduletextにテーブルのhtmlを保存しています。私はそれをクリックするときにテーブルの任意のセルを編集できるようにしたいので、クリックアクションでJQueryを使用しています。セルをクリックすると空白になりますが、入力することはできません。これを入力するには何を変更する必要がありますか？私のコードを実行するために、あなたもテーブルを必要とするので、編集およびテストの目的のために ContentEditableをHTMLテーブルに挿入する

<html> 
    <body>   
     <div id="main"> 
      <?php 
       print_r($scheduletext); 
      ?> 
     </div> 
     <script type="text/javascript"> 
      $('td').click(function(){ 
       $(this).html("<contenteditable>"); 
      }); 
     </script> 
    </body> 
</html>

は、CSSのdoesntのは、どちらか傷つける...私は私の手を与えるしようとしている人のためにうまくいけば、それを容易にするためにJSfiddleにそれをダンプ： https://jsfiddle.net/4yczepsj/ ありがとうございます！

編集：何かの理由でJSfiddleは何もしませんが、クリックしたときには何もしませんが、私のサイトのライブモデルでは、クリックするとセルが空白になりますが、何も入力できません。

出典

2016-10-25 Brandon

。 JSボックスの右上の "JavaScript"ボタンをクリックすると、これを行うことができます。 –

td要素の内部HTMLを<contenteditable>要素（有効ではありません）を含むように変更すると、.html("<contenteditable>")が呼び出されます。

$(this).prop('contenteditable', true);

出典

2016-10-25 15:08:55

contentEditableが属性である：あなたが実際に何をしたいのかはcontenteditableプロパティを設定されています。

これを試してみてください：

$(this).attr('contentEditable', true);

出典

2016-10-25 15:08:59

コンテンツ編集可、属性、ない要素です。編集可能なコンテンツを持つ要素に属性contenteditableを追加します。

$('td').click(function(){ 
    $(this).attr("contenteditable"); 
});

出典

2016-10-25 15:11:37

https://jsfiddle.net/4yczepsj/1/

$('table').on('mousedown', 'td', function (event) { 
    $(event.target).closest('td').prop("contentEditable", true); 
});

出典

2016-10-25 15:13:26 Qwertiy

NOTEこれはそれらに他の回答が含まれている情報、クレジットが含まれますが、私はもう少しを追加し、一箇所にすべてを入れています。

私は次のように変更作られた：表のセルがtabableあるので

はtabindex属性を追加しました。
クリック時に表のセルにフォーカスを移動します。
contenteditableをフォーカスに追加します。
フォーカスのあるテーブルセルの内容を選択します。
をblur（フォーカスが失われたとき）から削除します。あなたはJSFiddleでのjQueryを含める必要が

function setSelection(element) { 
 
    // code for selection from http://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click#answer-3806004 
 
    setTimeout(function() { 
 
    var sel, range; 
 
     if (window.getSelection && document.createRange) { 
 
      range = document.createRange(); 
 
      range.selectNodeContents(element); 
 
      sel = window.getSelection(); 
 
      sel.removeAllRanges(); 
 
      sel.addRange(range); 
 
     } else if (document.body.createTextRange) { 
 
      range = document.body.createTextRange(); 
 
      range.moveToElementText(element); 
 
      range.select(); 
 
     } 
 
    }, 0) 
 
} 
 

 
// add tabindex to all tds. 
 
$('td').attr('tabindex', 0); 
 

 
$('td').on('focus', function() { 
 
    $(this).attr('contenteditable', true); 
 
    setSelection(this); 
 
}).on('blur', function() { 
 
    $(this).attr('contenteditable', false); 
 
})

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    font-size: 90%; 
 
} 
 
th, 
 
td { 
 
    padding: 8px; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<div id="main"> 
 
    <table> 
 
    <tr> 
 
     <th></th> 
 
     <th>22oz Dark</th> 
 
     <th>12ct 4oz Dark</th> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-01</th> 
 
     <td>9785</td> 
 
     <td>2478</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-02</th> 
 
     <td>8754</td> 
 
     <td>2136</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-03</th> 
 
     <td>13587</td> 
 
     <td>2203</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-04</th> 
 
     <td>14111</td> 
 
     <td>3297</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-05</th> 
 
     <td>13212</td> 
 
     <td>3101</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-06</th> 
 
     <td>16335</td> 
 
     <td>3299</td> 
 
    </tr> 
 
    <tr> 
 
     <th>2016-01-07</th> 
 
     <td>15421</td> 
 
     <td>3100</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</body> 
 

 
</html>

出典

2016-10-25 15:52:16 Mobius

ContentEditableをHTMLテーブルに挿入する

答えて

関連する問題