jquery - Phpmyadmin 喜欢输入

Question

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

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

我在stackoverflow的其他地方找到了这个

http://jsfiddle.net/NCHJB/3/

所以理想情况下我想删除

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