javascript - 单击 x 可编辑和空 td
问题描述
我想td
在我的表格中选择一个进行编辑并自动清理它的文本td
。
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: true,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
}
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" data-placement="bottom" class="task" data-type="text">001</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" data-placement="bottom" class="task" data-type="text">002</td>
</tr>
</tbody>
</table>
$('.editable').editable('setValue', null)
,但只有 ID。我不知道如何在表中使用setValue
. 我希望我解释清楚。问候
解决方案
您可以使用这种简单的方法来选择一个 td 并在单击时清除其文本。
let td = document.querySelectorAll("td");
for(let i of td) {
i.addEventListener('click', () => {
i.innerHTML = "";
})
}
如果您只想使用类任务选择 td,它将在所有 td 上添加事件侦听器,然后将 querySelectorAll() 的值替换为“td.task”