Editable 个动态单元格 table
Editable cells in dynamic table
我正在尝试使用变量号创建动态 table。的行和列。 Table 已创建,但当我单击单元格时,它们不是我假设的 editable。
$(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>
我以前做过同样的事情,但使用的是静态 table。 JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/
现在我想对动态 table 做同样的事情。我在这里做错了什么?
应将操作移至 createit 处理程序定义中。
$(".editableTable td").dblclick(function() {...});
在创建单元格之后(当然是在单击克里特 Table 之后!)。
否则选择器 $(".editableTable td") 在动态 table 到位之前不会 return 任何东西。
您应该将 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;
}
});
<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'; " />
$(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>
我正在尝试使用变量号创建动态 table。的行和列。 Table 已创建,但当我单击单元格时,它们不是我假设的 editable。
$(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>
我以前做过同样的事情,但使用的是静态 table。 JSFIDDLE https://jsfiddle.net/rbrohitbisht/691rx62k/
现在我想对动态 table 做同样的事情。我在这里做错了什么?
应将操作移至 createit 处理程序定义中。
$(".editableTable td").dblclick(function() {...});
在创建单元格之后(当然是在单击克里特 Table 之后!)。
否则选择器 $(".editableTable td") 在动态 table 到位之前不会 return 任何东西。
您应该将 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;
}
});
<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'; " />
$(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>