[英]jQuery contentEditable not working - Internet Explorer 8 - edit table items
[英]ContentEditable Not Working in Internet Explorer 11
我有一列中有一个编辑按钮的HTML表。 当用户按下“编辑”按钮时,其中一列应变为可编辑状态。 这在Chrome / Safari / Firefox中有效,但在IE中不起作用。 它将允许我按下编辑按钮,但是一旦按下它,将不允许进行任何列编辑。
我如何在IE中也可以使用此功能? contenteditable
与IE兼容吗? 如果没有,那将是一种解决方法?
HTML:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort" style="display: none">ID</th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th class="sorttable_nosort">Edit</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td style="display: none" class="id"><?php echo $row['ID'];?></td>
<td class="loc"><?php echo $row['Loc'];?></td>
<td class="rp-code" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td class="sku" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td class="special-id" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td class="description" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td class="quantity" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td class="unit" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td><button type="button" class="edit" name="edit">Edit</button></td>
</tr>
<?php } ?>
</tbody>
</table>
JavaScript:
$(document).on("click", "#merchTable .edit", function () {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
if ($this.text() === 'Edit') {
$this.text('Save');
if($this.id !== '.quantity') {
tds.not('.loc').not('.rp-code').not('.sku').not('.special-id').not('.description').not('.unit').prop('contenteditable', true);
}
} else {
var isValid = true;
var errors = '';
var elements = tds;
if (tds.find('input').length > 0) {
elements = tds.find('input');
}
var dict = {};
elements.each(function (index, element) {
var type = $(this).attr('class');
var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text();
console.log(type);
// ----- Switch statement that provides validation for each table cell -----
switch (type) {
case "id":
dict["ID"] = value.trim();
break;
case "quantity":
if ($.isNumeric(value)) {
dict["Quantity"] = value.trim();
break;
} else {
isValid = false;
errors += "Please enter a numeric value\n";
break;
}
}
})
if (isValid) {
console.log(dict);
$this.text('Edit');
tds.prop('contenteditable', false);
var request = $.ajax({
type: "POST",
url: "update.php",
data: dict
});
request.done(function (response, textStatus, jqXHR){
if(JSON.parse(response) == true){
console.log("row updated");
} else {
console.log("row failed to updated");
console.log(response);
console.log(textStatus);
console.log(jqXHR);
}
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.log(textStatus);
console.log(jqXHR);
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
});
} else {
alert(errors);
}
}
});
在Internet Explorer中,contenteditable不能直接应用于TABLE,COL,COLGROUP,TBODY,TD,TFOOT,TH,THEAD和TR元素,可以将内容可编辑SPAN或DIV元素放置在各个表单元格中(请参见http: //msdn.microsoft.com/zh-CN/library/ie/ms533690(v=vs.85).aspx )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.