【分享】这几天学jquery，刚写了个可编辑表格，求批评……

inetfuture 2011-02-18 12:28:08

都写在一个文件中了，保存为html即可查看效果……别忘了导入jquery



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可编辑表格</title>

<style type="text/css">

<!--

	/*设置表格边框*/

	.editTable { border-left:1px green solid; border-bottom:1px green solid; border-collapse:collapse;}	

	.editTable th, td { border-top:1px green solid; border-right:1px green solid;}

	.editTable .num { text-align:center;}

	.editTable td { padding:2px 6px;}

	/*隐藏按钮*/

	.editTable .confirmBtn, .cancleBtn { display:none;}

-->

</style>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

<!--

	$(function(){

		//设置行背景色交替

		$('.editTable tbody tr:even').css('background-color','#ECECEC');

		//使文本框只接受数字、退格，回车触发“确定”按钮的单击事件，即使文本框是追加的

		$('.id :text').live('keydown',function(event){

			//window.event为IE6特有，FF会传递event，IE6不会

			var e = event || window.event;

			var keyCode = e.which || e.keyCode;

			if((keyCode < 48 || keyCode >57) && keyCode != 8 && keyCode != 13){

				return e.returnValue = false;

			}

			if(keyCode == 13){

				$(this).parent().nextAll().find('.confirmBtn').click();

			}

		});	

		//定义全局Array，以保存当前正在编辑的行中的文本

		var text = new Array();

		//“编辑”按钮单击事件

		$('.editBtn').click(function(){

			//取得当前td

			var td = $(this).parent();

			//使其他行“编辑”按钮失效

			td.parent().siblings().find('.editBtn').attr('disabled','disabled');

			//隐藏“编辑”按钮，显示“确定”、“取消”按钮						          //$(this).children('.edit').hide().end().children('.confirm').show().end().children('.cancle').show();			

			td.children().toggle();	//简化的写法

			

			//操作td之前的所有td

			td.prevAll().not('.num').each(function(i){

				//取得当前td

				var td = $(this);

				//按索引保存当前单元格中的文本

				text[i] = td.text();

				//将单元格中的文本清空

				td.text('');

				//新建input

				var width = td.width() - 2;	//减去边框宽度

				var input = $('<input />')

					.width(width) //使文本框与单元格等宽

					.css('font-size',td.css('font-size'))

					.css('background-color',td.css('background-color'))

					.css('border','1px solid red')

					.val(text[i])

					.appendTo($(this));

				//说明顺序是自后向前的

				if(i == 0){

					//使最后一个文本框中文字被选中，为兼容Safari，先focus再select

					//DOM写法

					//var inputDom = input.get(0);

					//inputDom.focus();

					//inputDom.select();

					input.trigger('focus').trigger('select');

				}				

			});									   

		});	

		//“确定”按钮单击事件

		$('.confirmBtn').click(function(){

			var td = $(this).parent();

			td.parent().siblings().find('.editBtn').removeAttr('disabled');

			td.children().toggle();

			td.prevAll().not('.num').each(function(){

				var text = $(this).children('input').val();

				$(this).text(text);

			});

		});

		//"取消"按钮单击事件

		$('.cancleBtn').click(function(){

			var td = $(this).parent();

			td.parent().siblings().find('.editBtn').removeAttr('disabled');

			td.children().toggle();

			td.prevAll().not('.num').each(function(i){

				//按索引恢复单元格中的文本

				$(this).text(text[i]);

			});

		});

	});

//-->

</script>

</head>



<body>

	<table class="editTable">

    	<thead><th colspan="4">可编辑表格</th></thead>

        <tbody>

        	<tr>

            	<th>编号</th>

                <th>姓名</th>

                <th>身份证号</th>

                <th>操作</th>

            </tr>

        	<tr>

                <td class="num">1</td>

                <td class="name">王某某</td>

                <td class="id">7836457861783467671</td>

                <td class="operation">

                    <input type="button" value="编辑" class="editBtn" />

                    <input type="button" value="确定" class="confirmBtn" />

                    <input type="button" value="取消" class="cancleBtn" />

                </td>

        	</tr>

            <tr>

                <td class="num">2</td>

                <td class="name">张某某</td>

                <td class="id">3246456575674687688</td>

                <td class="operation">

                    <input type="button" value="编辑" class="editBtn" />

                    <input type="button" value="确定" class="confirmBtn" />

                    <input type="button" value="取消" class="cancleBtn" />

                </td>

            </tr>

            <tr>

                <td class="num">3</td>

                <td class="name">赵某某</td>

                <td class="id">8246154536313777566</td>

                <td class="operation">

                    <input type="button" value="编辑" class="editBtn" />

                    <input type="button" value="确定" class="confirmBtn" />

                    <input type="button" value="取消" class="cancleBtn" />

                </td>

            </tr>

            <tr>

                <td class="num">4</td>

                <td class="name">于某某</td>

                <td class="id">2542657578998000688</td>

                <td class="operation">

                    <input type="button" value="编辑" class="editBtn" />

                    <input type="button" value="确定" class="confirmBtn" />

                    <input type="button" value="取消" class="cancleBtn" />

                </td>

            </tr>

        </tbody>    	

    </table>

</body>

</html>