js replaces the current tr text with an input box for editing data

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<table width="300" border="1">
        <td style="width:50px">编号</td>
        <td style="width:150px">姓名</td>
        <td style="width:100px">操作</td>
        <td style="width:50px">1</td>
        <td style="width:150px">张三</td>
        <td style="width:100px"><input type="submit" value="修改" onclick="tal(this)" /></td>
        <td style="width:50px">2</td>
        <td style="width:150px">李四</td>
        <td style="width:100px"><input type="submit" value="修改" onclick="tal(this)" /></td>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    function tal(obj){    
        var tds = $( obj ).parent().parent();         //Define td form within             var td2=td.eq(1).html();         var td1=td.eq(0).html();         //Get the current td value
        var td=tds.find( "td" );


        var tdvalue1=td1;
        var tdvalue2="<input id='td2' type='text' value='"+td2+"'>";
        var tdvalue3="<input type='submit' value='Submit' onclick= 'talvalue(this)'>";
        Reassign td.eq(0).html(tdvalue1);
    function talvalue(obj){
        //Locate the current tr
        var tds = $( obj ).parent().parent();
        var td=tds.find( "td" )
        //Get the form value
        var data1=td.eq( 0).html();
        var data2=td.eq(1).find("input").val();
        Reassign td.eq(0).html(data1);
        td.eq(2).html("<input type='submit' value='修改' onclick='tal(this)'>");

Guess you like