Question

我正在尝试将一些表更改为动态可更改的表（单击单元格以修改内容 - 基本上您单击单元格并将内容转换为文本框，当您单击它时将其修改为提交数据到一个要保存的php语句）。我对jquery或ajax不是很熟悉，所以这很难。

目前我只想尝试实现第一部分（点击并转换为文本框 - 点击关闭并转换回文本）

我在stackoverflow上的其他地方发现了这个

理想情况下，我想删除

   <td><button>Edit</button></td>

感谢任何帮助。

Answer 1

我会在那里放一个输入框，并使用css删除所有边框，背景等等。

然后当你专注于输入框时，为它添加一个css类以恢复类似输入的css样式，并在失去焦点时删除它们（onblur）

小提琴：http://jsfiddle.net/Pe47d/

HTML

<input type="text" id="test" value="something!" />

Javascript（jQuery）

$('#test').focus( function() {
    $(this).addClass('focus');
}).blur( function() {
    $(this).removeClass('focus');
    // Do stuff here if you want... like submitting data to server or something
});

CSS

#test {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}

#test.focus {
    border: 1px solid #000;
}

更新符合您的要求..

小提琴：http://jsfiddle.net/S99My/

HTML

<table id="table">
    <tr><td><span class="text">Something</span><input type="text" class="hidden" name="somename" value="Something" /></td></tr>
    <tr><td><span class="text">Something</span><input type="text" class="hidden" name="somename" value="Something" /></td></tr>
    <tr><td><span class="text">Something</span><input type="text" class="hidden" name="somename" value="Something" /></td></tr>
    <tr><td><span class="text">Something</span><input type="text" class="hidden" name="somename" value="Something" /></td></tr>
</table>

的Javascript

jQuery( function($) {
    $('.text').click( function() {
        $(this).hide();
        $(this).siblings('input').show().focus();
    });

    $('#table input').blur( function() {
        // Save stuff here....
        $(this).hide();
        $(this).siblings('.text').show();
    });
});

CSS

.hidden {
    display: none;
}

Phpmyadmin喜欢输入

1 个答案: