Question

我有数据库表。这里包含表格的代码：link 我想单击要更新值的单元格。单元格应该具有如下类：

.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）转换为输入字段，并在更新后恢复为常规单元格。

Answer 1

示例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();
});

Answer 2

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

为了给您一个起点，我修改了 Example

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

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

Answer 3

您可以使用此插件，例如： PLUGIN

OR

插件号2：Link

$('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' }
        }
});

Answer 4

尝试以下方法：

$('td').click(function(e){
    var txt = $(this).text();
    $(this).replaceWith('<input class="edited" type="text" value="' + txt + '" />');
})

Answer 5

我发现了洗脱。洗脱液在细胞上含有两个元素（td标签）。 1 - 一个元素是跨度。 2 - secend元素是输入字段。正常模式，跨度是可见的，输入字段是隐藏的。编辑模式我们与alemnt的属性相对，它意味着span是hiden并且输入字段是显示的。 selution jsfiddle的链接你应该点击cel名称'colume1'然后你可以编辑它。当你finsh你可以点击表外，新的价值将保持不变。代码：

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;
}

感谢..

如何编辑表格单元格中的值以更新到数据库

5 个答案: