1

我有数据库表。这里是带有表格的代码：链接 我想单击要更新值的单元格。单元格应具有如下类：

.edittd
{
 display:none
}

单击单元格后，该类将是：

.edittd
{
font-size:14px;
width:200px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}

这将使单元格更大，更显眼。

然后在输入新值并在字段外单击后，它会被更新。

我试着像下面那样做：

$('tr').click(function(){ 
    $('#display').html(this.id); 
    $('td',this).attr('class').toggleClass('edittd');
});​

我也不知道如何将常规单元格（td）转换为输入字段并在更新后恢复为常规单元格。

4

5 回答 5

0

尝试以下操作：

$('td').click(function(e){
    var txt = $(this).text();
    $(this).replaceWith('<input class="edited" type="text" value="' + txt + '" />');
})
于 2012-05-24T11:07:02.283 回答
0

示例 HTML 代码...

<tr id="5" class="edit_tr">
<td width="50%" class="edit_td">
<span id="first_5" class="text" style="display: inline; ">Priyank</span>
<input type="text" value="Priyank" class="editbox" id="first_input_5" style="display:    none; ">
</td>
<td width="50%" class="edit_td">
<span id="last_5" class="text" style="display: inline; ">Patel</span> 
<input type="text" value="Patel" class="editbox" id="last_input_5" style="display: none;  ">
</td>
</tr>

Javascript代码：

$(".edit_tr").click(function(){
    var ID=$(this).attr('id');
    $("#first_"+ID).hide();
    $("#last_"+ID).hide();
    $("#first_input_"+ID).show();
    $("#last_input_"+ID).show();
});
于 2012-05-24T10:07:07.210 回答
0

不要替换会使您的标记无效的 td，只需添加一个输入字段作为子项。

为了给你一个起点，我编辑了你的例子

保存后，删除输入字段和类edittd。

注意：切换类的正确调用是：$('td').toggleClass('edittd');

于 2012-05-24T10:08:11.367 回答
0

你可以像这样使用这个插件：PLUGIN

或者

插件 2：链接

$('table.myTable').inplacerowedit({


    url: /Some/URL',
        inputs: {
            '0': { type: 'datepicker', name: 'OpenDate' },
            '1': { type: 'datepicker', name: 'CloseDate' },
            '2': { type: 'text', name: 'Cost' },
            '3': { type: 'text', name: 'Description' }
        }
});
于 2012-05-24T10:08:22.587 回答
0

我找到了解决办法。解决方案在单元格上包含两个元素（td 标记）。1 - 一个元素是跨度。2 - 第二个元素是输入字段。正常模式下，span 是可见的，输入字段是隐藏的。编辑模式我们与alemnt的属性相反，这意味着跨度被隐藏并且输入字段被显示。selution jsfiddle的链接 你应该点击cel名称'colume1'之后你可以编辑它。完成后，您可以在表格外部单击，新值将保留。编码：

var COLUME, VAL;
$('td').click(function() {
    COLUME = $(this).attr('id');
    $('#displaycolumeid').html(COLUME);
    $('#colume1').hide();
    $('#inputName').show();

});


$(".edittd").mouseup(function() {
    return false
});


$(document).mouseup(function() {
    $('#colume1').show();
    $('#inputName').hide();
    VAL = $("#inputName").val();
    $("#colume1").html(VAL); 
});​

的CSS：

.edittd
{
font-size:14px;
width:200px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.display{
background:red;
    width:110px;
}

谢谢..

​</p>

于 2012-05-24T18:50:30.687 回答