动态表格中的可编辑单元格
我正在尝试使用变量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/
现在我想用动态表做同样的事情。我在这里做错了什么？
该操作应该移入createit处理程序定义中。
$(".editableTable td").dblclick(function() {...});
刚创建好单元格后（当然在单击克里特表格后！）。
否则，在动态表就位之前，选择器$（“。editableTable td”）不会返回任何内容。
这解决了我的问题。但是我有一个疑问，只有当某个'td'被dblclicked时，我才调用$（“。editableTable td”），所以，这意味着只有在创建表之后，我才可以在创建后单击表格单元格桌子。所以逻辑上它应该使用$（“。editableTable td”）。dblclick（function（）{}）;. 或者它正在像在加载js时一样，如果它没有找到任何具有此名称的类，那么它将不会返回任何内容？ –
$（“。editableTable td”）。dblclick（..）在初始文档加载时被调用。那时候，选择器什么都不返回。所以，事件处理程序根本就没有附加任何东西。为了更好地理解事物，尝试在萤火虫后运行这段代码，创建表格。一旦你运行这段代码，你将会看到处理程序所附的所有元素。没有创建表运行相同。你会看到不同之处。 –
您应该添加contenteditable="true"到您的代码
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;
}
});
因为我已经说过我正在做什么，并且还提到了一个JSFIDDLE，我不需要让它contenteditable =“true”，但现在我得到了答案，谢谢你的时间和回应。 https://codepen.io/anon/pen/owgyqg#anon-login –
use HTML DOM "contentEditable" Property Element Object https://*.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'; " />感谢你的回复，但这不是我正在寻找的那一个...... –
亲爱的朋友。我知道你的问题，这是你的代码的补充代码片段，并自动为表格编辑它，你可以使用这个代码 –
首先，表格单元格必须是可编辑的，只有当单元格被点击时。可编辑的单元格可能包含选项选择，文本框等。编辑单元格时，按下Tab键时，它应该关注下一个Tab-Index单元格并使其可编辑。最后一点，单元格的原始值应该保留，从下拉列表中选择的值将用于其他事情。 –
$(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>
哪里是CONTENTEDITABLE = “真” 加入到细胞？ – RouthMedia
@RouthMedia，我想你并没有在我提到的问题上提到过那个jsfiddle。请看看。 –