我正在嘗試使用變量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/
現在我想用動態表做同樣的事情。我在這裏做錯了什麼?
哪裏是CONTENTEDITABLE = 「真」 加入到細胞? – RouthMedia
@RouthMedia,我想你並沒有在我提到的問題上提到過那個jsfiddle。請看看。 –