非常简单的JS可编辑表格，帮忙看下

shawn.bug 2012-02-26 12:11:11

很简单，鼠标单击学号列的时候可以编辑，点确定保存，取消恢复默认值
当前行处在编辑的状态的时候点击其他行编辑的话提示确定保存当前修改内容(确定取消)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

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

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

<style type="text/css">

.hideEle

{

display: none;

}

</style>

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

</head>

<body>

    <br>

    <br>

      <h4>

        User</h4>

    <form action="www.163.com" method="post" id="form" onsubmit="at()">

    <table border="1" width="600" id='tb'>

        <tbody>

            <tr>

				<th >

                    

                </th>

                <th width='300'>

                    学号

                </th>

                <th>

                    操作

                </th>

            </tr>

            <tr><td><input type="checkbox"></td>

                <td>000001</td>

                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>

            </tr>

           <tr><td><input type="checkbox"></td>

                <td>000002</td>

                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>

            </tr>

			 <tr><td><input type="checkbox"></td>

                <td>000003</td>

                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>

            </tr>

			 <tr><td><input type="checkbox"></td>

                <td>000003</td>

                 <td><a href="#" class="edit">确定</a>|<a href="#" class="remove">取消</a></td>

            </tr>

        </tbody>

       

    </table>

    </form>

</body>





</html>

...全文

260 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

小昭 2012-02-28

打赏
举报

JS我不大会，JQ我就写过，原理简单，主要是语法吧。

cm80018 2012-02-28

打赏
举报



<html>

<head>

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

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

<style type="text/css">

.hideEle

{

display: none;

}

</style>

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

<script type="text/javascript">

function shuru(td){

	ubd();

	$("#hc").val(td.html());

	td.empty();

	td.append("<input type='text'>");

	

	$("input[type=text]").bind('blur',function(){ 

		var text = $("input[type=text]"); 

		if(text!=null)

		if(confirm("确认更改")){

			sv(text);

		}else{

			qx();

		}	

	});

	$("input[type=text]").focus();

}	

function qd(){

	var text = $("input[type=text]"); 

	if(text!=null)

	if(confirm("确认更改")){

		sv(text);

	}

}

function qx(){

	var text = $("input[type=text]");

	var td = text.parent() 

	td.empty();

	td.append($("#hc").val());

	bd();

}

function sv(text){

	var td = text.parent(); 

	var zhi = text.val();

	td.empty();

	td.append(zhi);

	bd();

}

function bd(){

	$("table tr td:nth-child(2)").bind('click',function(){

  	shuru($(this));

  });

}

function ubd(){

	$("table tr td:nth-child(2)").unbind('click');

}

$(document).ready(function(){

	bd(); 

});

</script>

</head>

<body>

    <br>

    <br><input type="hidden" id="hc">

      <h4>

        User</h4>

    <form action="www.163.com" method="post" id="form" onSubmit="at()">

    <table border="1" width="600" id='tb'>

        <tbody>

            <tr>

                <th >

                   全选<input type="checkbox"> 

                </th>

                <th width='300'>

                    学号

                </th>

                <th>

                    操作

                </th>

            </tr>

            <tr><td ><input type="checkbox"></td>

              <td >000001</td>

                 <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>

            </tr>

           <tr><td><input type="checkbox"></td>

                <td >000002</td>

                 <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>

            </tr>

             <tr><td><input type="checkbox"></td>

                <td onClick="shuru">000003</td>

                 <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>

            </tr>

             <tr><td><input type="checkbox"></td>

                <td>000003</td>

                 <td><a href="#" class="edit" onClick="qd()">确定</a>|<a href="#" class="remove" onClick="qx()">取消</a></td>

            </tr>

        </tbody>

       

    </table>

    </form>

</body>





</html>