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是个好东西啊，还是要好好学学

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