Thinkphp，JavaScript，html实现对数据表的修改（方法二）

         哎呀，虽然这个理论上来说不是太难，对各位大神来说很easy啊，但是还是纠结了我一个多小时滴，实现了还是很开心啊，我想实现这样一个效果，当点击修改时，页面从原来的不可编辑状态变成可编辑状态。前两天做对数据的修改时，使用的是跳到一个新的模板页，然后进行修改，可是这样做又要增加一个新的页面，而且不容易快速的找到想修改的项，也勉强算是用户体验性不高吧。今天使用的方法是这样的，当数据表中没有数据时，页面显示为空的文本框，当数据表中有数据时，则将数据表中的数据直接显示在相应位置，如图：

这个页面的代码实现我使用了thinkphp中的if标签实现的，当数据表中的某个属性值为空时则显示为文本框，不为空则调出来显示在页面中，代码如下

<if condition="$list.Schoolname neq ''">
     <span name="name"><strong>{$list.Schoolname}</strong>
     </span> 
<else/>
<input type="text" name="name" class="inp"/></if>

使用if标签来判断我所需要的值是否为空。

condition="$xxx neq ''"

的意思是$xxx不为空，具体的可以参考thinkphp的手册，还可以调用自己的函数，这个我还没看......

现在假设每个属性都不为空，有需要对数据进行修改，当点击修改按钮时，原来不可编辑的部分全部变成文本框，而且之前的内容还显示在文本框中，如下图所示：

这里就使用到了JavaScript的方法了，

if condition="$list neq ''">
    <a href="javascript:void(0)" class="edit" >[修改]</a>
</if>

点击修改时的html代码处理如上，

再在JavaScript中用if语句判断，有些显示多行输入文本控件，有些显示文本框，当然保存按钮也可以做相对处理（当点击修改时，才需要对修改的内容进行更改保存，不可编辑状态下不需要），

$('.edit').click(function(){
		$('span').each(function(){
			var value = $(this).text();
			var name = $(this).attr('name');
			if ((name=='version')){
				$(this).after('<textarea rows="6" cols="50" name="'+name+'">'+value+'</textarea>');
			}
                        else if((name=='submit')){
                                $(this).after('<input name="'+name+'" type="submit" class="sub" value="保存"/>');
                        }
                        else{
				$(this).after('<input type="text" name="'+name+'" value="'+value+'" class="inp"/>');
			}

			$(this).remove();
		})
		
	})

JavaScript是个好东西啊，还是要好好学学

这都是自己的理解，如果有说的不对，请大家多多指教，谢谢