动态表格中的可编辑单元格

本文介绍了动态表格中的可编辑单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图用变量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.