我已经查看了几个可编辑的表插件,但我不确定它们是否真的需要我的需求。我想要做的就是点击一个td元素,获取当前值,然后将td html更改为输入+按钮,当按下按钮时,删除输入和按钮并将新文本放在td中。这是我拥有的,它根本不起作用。当你点击一个td时,整个表格就会消失,并被输入替换。
这是JS:
var selectedObj;
$('td').click(function(e){
// Handle the click
if ($('#currentInput').length == 0)
{
selectedObj = $(this);
var currentValue = $(this).text();
var newValue = currentValue;
$(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");
}
});
function setNewValue()
{
var newValue = $('#currentInput').val();
selectedObj.html('');
selectedObj.text(newValue);
}
HTML:
<p>
<table id='transitTable' border="0" cellspacing="2" cellpadding="2" class='display' width="400">
<tr id='1'>
<td class="etsHeader etsLeft">H1</td>
<td class="etsHeader etsLeft">H2</td>
<td class="etsHeader etsLeft">H3</td>
<td class="etsHeader etsLeft">H4</td></tr>
<tr id='2'>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td></tr>
<tr id='3'>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td></tr></table></p>
答案 0 :(得分:6)
为什么不尝试contentEditable = true,
检查here
答案 1 :(得分:2)
这是因为您要用td
标记替换input
,该标记在该上下文中无效。
违规代码
$(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");
尝试.append()
到td
或将td
值包装在另一个标记中。