我正在为一个项目使用两个很棒的 jQuery 插件:
- 这个日期/时间选择器:https://github.com/xdan/datetimepicker
- 这个 HTML 表格编辑器:https://github.com/mindmup/editable-table
它们单独工作得很好，但不幸的是它们彼此不兼容。当我想更新 HTML 表格中的日期时，当我单击日期/时间时，日历会出现并关闭，但表格单元格中的值不会更新(Chrome 的 javascript 控制台不会报告任何错误消息)。您知道解决方案或解决方法吗？您可以使用以下代码自行快速测试:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
<head>
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://mindmup.github.io/editable-table/mindmup-editabletable.js'></script>
<link href='http://xdsoft.net/scripts/jquery.datetimepicker.css' rel='stylesheet' type='text/css' />
<script src='http://xdsoft.net/scripts/jquery.datetimepicker.js'></script>
<script>
$(function() {
$('table').editableTableWidget();
$('.picker').datetimepicker({ format:'Y-m-d H:i' });
});
</script>
</head>
<body>
<p>The date/time picker works perfectly:</p>
<input class='picker' />
</br></br>
<p>But not in the table below:</p>
<table style='border:1px solid black'>
<tr><td class='picker'>2014-08-22 15:00</td></tr>
<tr><td>However no problem for text, i.e. just here!</td></tr>
</table>
</body>
</html>
如果这两个插件可以协同工作，那就太棒了。谢谢!
皮埃尔
最佳答案
当我在寻找可以满足您的需求的东西时，我发现了您的问题。我没有找到它，所以修改了 mindmup 解决方案，将其扩展为包括几种不同的编辑方法。我最终得到的是:
- 常规文本。
- 日期，使用 bootstrap-datepicker。
- 值文本，这是我的应用程序特定的内容，用户可以在其中输入带或不带逗号的整数，并以逗号显示。
- 数字，使用
<input type="number">作为整数元素。 - 选择。这些有点棘手，但本质上你提供了一个 javascript 关联数组，并且代码使用了
data-edit-source属性来查找数组。
git repository 上有一个例子.我会把代码放在这里，但我很懒，不想解释它。对于那个很抱歉。如果您下载代码，index.html 文件中有一个演示。
表格如下所示:
<table id="secondDemo" class="table table-striped">
<thead><tr>
<th>Location</th>
<th>Expires</th>
<th>Count</th>
<th>Value</th>
</tr></thead>
<tbody>
<tr>
<td data-edit-type="select" data-edit-source="locations">Adelaide</td>
<td data-edit-type="date">24-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">5,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Brisbane</td>
<td data-edit-type="date">25-Jan-2015</td>
<td data-edit-type="ntext">8</td>
<td data-edit-type="vtext">15,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Melbourne</td>
<td data-edit-type="date">26-Jan-2015</td>
<td data-edit-type="ntext">9</td>
<td data-edit-type="vtext">8,000</td>
</tr>
<tr>
<td data-edit-type="select" data-edit-source="locations">Sydney</td>
<td data-edit-type="date">27-Jan-2015</td>
<td data-edit-type="ntext">6</td>
<td data-edit-type="vtext">9,000</td>
</tr>
</tbody>
</table>
...所需的 javascript 如下所示:
var locations = {
'Adelaide': 'Adelaide - South Australia',
'Brisbane': 'Brisbane - Queensland',
'Canberra': 'Canberra - Australian Capital Territory',
'Darwin': 'Darwin - Northern Territory',
'Hobart': 'Hobart - Tasmania',
'Melbourne': 'Melbourne - Victoria',
'Perth': 'Perth - Western Australia',
'Sydney': 'Sydney - New South Wales'
};
$('#secondDemo').editableTableWidget();
希望这对您有所帮助。
关于javascript - 使日期时间选择器与可编辑表一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25592883/