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