我试图用变量no做一个动态表。行和列。表格已创建,但是当我点击单元格时,它们不可编辑,因为我认为它们将会是。
$(document).ready(function(){$(#createit)。click(function(){var num_rows = document.getElementById('rows').value; var num_cols = document .getElementById( '的cols')值; VAR TBODY = '';对于(VAR I = 0; I< NUM_ROWS;我++){TBODY + = '< TR>';对于(VAR J = 0; J< ; NUM_COLS; J ++){TBODY + = '< TD的tabindex =' + J + '>'; TBODY + = '细胞' + I + J; TBODY + = '< / TD>'} TBODY + =' < / tr>';} //文档.getElementById('wrapper')。innerHTML = theader + tbody + tfooter; $( editableTable。)追加(TBODY)。 }); }); $(。editableTable td)。dblclick(function(){console.log('clicked'); var OriginalContent = $(this).text(); $(this).addClass(cellEditing); $(这一点)。html的( <选择><选项→1< /选项><选项→2< /选项><选项→3< /选项>< /选择> 中); $(本) ()。$(this).bgColor ='red'; $(this).children()。first()。keypress(function(e){if(e.which = (原始内容); $(this).parent()。removeClass(cellEditing);}}); $(this).children()= 13){var newContent = OriginalContent; $(this).parent ).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;宽度:100%; text-align:center} .editableTable td {border:solid 0.5px;边框颜色:浅蓝色; min-width:100px; } .editableTable .cellEditing {padding:0; } select {border:0px;宽度:100%; }
< script src =https:// ajax .googleapis / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< label>行:< input type =textname =rowsid = rows/>< / label>< br /> < label> Cols:< input type =textname =colsid =cols/>< / label>< br /> < input name =generatetype =buttonvalue =Create Table! id ='createit'/> < div id =wrapper> < table class =editableTable> < TBODY>< / tbody的> < /表> < / div>
一个静态表。的jsfiddle jsfiddle/rbrohitbisht/691rx62k/
现在我想用动态表做同样的事情。我在这里做错了什么?
解决方案该操作应移入createit处理程序定义中。 $ b
$(。editableTable td)。dblclick(function(){...});紧接在单元格创建之后(当然点击克里特表格后!)。
否则,在动态表就位之前,选择器$(。editableTable td)不会返回任何内容。
I'm trying to make a dynamic table with variable no. of rows and columns. Table is created but when i click on the cells, they are not editable as i assumed they will be.
$(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="ajax.googleapis/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>
Same thing i have done before but with a static table. JSFIDDLE jsfiddle/rbrohitbisht/691rx62k/
Now i want to do the same thing with the dynamic table. What i'm doing wrong here?
解决方案The operation should be moved into the createit handler definition.
$(".editableTable td").dblclick(function() {...});Just after the cells are created(of course after a click on Crete Table!).
Otherwise the selector $(".editableTable td") would not return anything before the dynamic table is in place.
更多推荐
动态表格中的可编辑单元格
发布评论