動的テーブル内の編集可能なセル

Question

変数noを使用して動的テーブルを作成しようとしています。行と列のテーブルが作成されますが、セルをクリックすると、それらは編集可能ではありません。

$(document).ready(function() { 
 
      $("#createit").click(function() { 
 
       var num_rows = document.getElementById('rows').value; 
 
       var num_cols = document.getElementById('cols').value; 
 
       var tbody = ''; 
 
       for (var i = 0; i < num_rows; i++) { 
 
        tbody += '<tr>'; 
 
        for (var j = 0; j < num_cols; j++) { 
 
         tbody += '<td tabindex=' + j + '>'; 
 
         tbody += 'Cell' + i + j; 
 
         tbody += '</td>' 
 
        } 
 
        tbody += '</tr>'; 
 
       } 
 
       //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
 
       $('.editableTable').append(tbody); 
 
      }); 
 
     }); 
 
     $(".editableTable td").dblclick(function() { 
 
      console.log('clicked'); 
 
      var OriginalContent = $(this).text(); 
 
      $(this).addClass("cellEditing"); 
 
      $(this).html("<select><option>1</option><option>2</option><option >3</option></select>"); 
 
      $(this).children().first().focus(); 
 
      $(this).bgColor = 'red'; 
 

 
      $(this).children().first().keypress(function(e) { 
 
       if (e.which == 13) { 
 
        var newContent = OriginalContent; 
 
        $(this).parent().text(OriginalContent); 
 
        $(this).parent().removeClass("cellEditing"); 
 
       } 
 
      }); 
 
      $(this).children().first().blur(function() { 
 
       $(this).parent().text(OriginalContent); 
 
       $(this).parent().removeClass("cellEditing"); 
 
      }); 
 
     }); 
 
     $(".editableTable td").bind('keydown', function(event) { 
 
      if (event.keyCode === 9 || event.keyCode === 13) { 
 
       var tabindex = $(this).attr('tabindex'); 
 
       tabindex++; //increment tabindex 
 
       $('[tabindex=' + tabindex + ']').focus().dblclick(); 
 
       return false; 
 
      } 
 
     });

.editableTable { 
 
      border: solid 0px; 
 
      width: 100%; 
 
      text-align: center 
 
     } 
 

 
     .editableTable td { 
 
      border: solid 0.5px; 
 
      border-color: lightblue; 
 
      min-width: 100px; 
 
     } 
 

 
     .editableTable .cellEditing { 
 
      padding: 0; 
 
     } 
 

 
     select { 
 
      border: 0px; 
 
      width: 100%; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
 
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br/> 
 
    <input name="generate" type="button" value="Create Table!" id='createit' /> 
 
    <div id="wrapper"> 
 
     <table class="editableTable"> 
 
      <tbody></tbody> 
 
     </table> 
 
    </div>

私は前にやったが、静的なテーブルとしている同じこと。 JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/

私はダイナミックテーブルで同じことをしたいと思います。私はここで間違っていますか？

Answer 1

操作をcreateitハンドラ定義に移動する必要があります。

$(".editableTable td").dblclick(function() {...}); 

セルが作成された直後（もちろん、クレタテーブルをクリックした後！）。

それ以外の場合、セレクタ$（ "。editableTable td"）は、ダイナミックテーブルが配置される前に何も返しません。

Answer 2

あなたはあなたのコード

https://codepen.io/anon/pen/XgJaxE

$(document).ready(function() { 
     $("#createit").click(function() { 
      var num_rows = document.getElementById('rows').value; 
      var num_cols = document.getElementById('cols').value; 
      var tbody = ''; 
      for (var i = 0; i < num_rows; i++) { 
       tbody += '<tr>'; 
       for (var j = 0; j < num_cols; j++) { 
        tbody += '<td contenteditable="true" tabindex=' + j + '>'; 
        tbody += 'Cell' + i + j; 
        tbody += '</td>' 
       } 
       tbody += '</tr>'; 
      } 
      //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
      $('.editableTable').append(tbody); 
     }); 
    }); 
    $(".editableTable td").dblclick(function() { 
     console.log('clicked'); 
     var OriginalContent = $(this).text(); 
     $(this).addClass("cellEditing"); 
     $(this).html("<select><option>1</option><option>2</option><option >3</option></select>"); 
     $(this).children().first().focus(); 
     $(this).bgColor = 'red'; 

     $(this).children().first().keypress(function(e) { 
      if (e.which == 13) { 
       var newContent = OriginalContent; 
       $(this).parent().text(OriginalContent); 
       $(this).parent().removeClass("cellEditing"); 
      } 
     }); 
     $(this).children().first().blur(function() { 
      $(this).parent().text(OriginalContent); 
      $(this).parent().removeClass("cellEditing"); 
     }); 
    }); 
    $(".editableTable td").bind('keydown', function(event) { 
     if (event.keyCode === 9 || event.keyCode === 13) { 
      var tabindex = $(this).attr('tabindex'); 
      tabindex++; //increment tabindex 
      $('[tabindex=' + tabindex + ']').focus().dblclick(); 
      return false; 
     } 
    }); 

Answer 3

use HTML DOM "contentEditable" Property Element Object https://stackoverflow.com/a/44380264/3615816

<input type=button value="Enable editing" 
 
onclick="document.getElementById('t1').contentEditable = 'true';alert('You can now edit table')" /> 
 

 
<table id="t1" border="1"> 
 
    
 
    <tr><td >c1</td><td >c2</td></tr> 
 
    <tr><td >cc1</td><td >cc2</td></tr> 
 

 
</table> 
 

 
<input type=button value="disable editing" 
 
onclick="document.getElementById('t1').contentEditable = 'false'; " />

に contenteditable="true"を追加する必要がありますcontentEditable = "真" が細胞に添加される

Answer 4

$(document).ready(function() { 
 
     $("#createit").click(function() { 
 
      var num_rows = document.getElementById('rows').value; 
 
      var num_cols = document.getElementById('cols').value; 
 
      var tbody = ''; 
 
      var tabindex = 0 
 
      for (var i = 0; i < num_rows; i++) { 
 
       tbody += '<tr>'; 
 
       for (var j = 0; j < num_cols; j++) { 
 
        tbody += '<td tabindex=' + tabindex++ + '>'; 
 
        tbody += 'Cell' + i + j; 
 
        tbody += '</td>' 
 
       } 
 
       tbody += '</tr>'; 
 
      } 
 
      //document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
 
      $('.editableTable').append(tbody); 
 
     }); 
 
    }); 
 
    $(document).on('dblclick', 'td', function() { 
 
     console.log('clicked'); 
 
     this.contentEditable = 'true'; 
 
    }); 
 
    $(document).on('keydown', 'td', function (event) { 
 
     if (event.keyCode === 9 || event.keyCode === 13) { 
 
      this.contentEditable = 'false'; 
 
      // $(this).next().focus().dblclick().focus(); 
 
      var tabindex = $(this).attr('tabindex'); 
 
      tabindex++; 
 
      var next = $('[tabindex=' + tabindex + ']').focus().dblclick(); 
 
      if (next.is('td') == false) 
 
       return true; 
 
      var sel, range; 
 
      if (window.getSelection && document.createRange) { 
 
       range = document.createRange(); 
 
       range.selectNodeContents(next[0]); 
 
       range.collapse(true); 
 
       sel = window.getSelection(); 
 
       sel.removeAllRanges(); 
 
       sel.addRange(range); 
 
      } else if (document.body.createTextRange) { 
 
       range = document.body.createTextRange(); 
 
       range.moveToElementText(next[0]); 
 
       range.collapse(true); 
 
       range.select(); 
 
      } 
 

 
      return false; 
 
     } 
 
    });

.editableTable { 
 
      border: solid 0px; 
 
      width: 100%; 
 
      text-align: center 
 
     } 
 

 
     .editableTable td { 
 
      border: solid 0.5px; 
 
      border-color: lightblue; 
 
      min-width: 100px; 
 
     } 
 

 
     .editableTable .cellEditing { 
 
      padding: 0; 
 
     } 
 

 
     select { 
 
      border: 0px; 
 
      width: 100%; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
 
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br/> 
 
    <input name="generate" type="button" value="Create Table!" id='createit' /> 
 
    <div id="wrapper"> 
 
     <table class="editableTable"> 
 
      <tbody></tbody> 
 
     </table> 
 
    </div>