报表数据编辑

表格数据编辑
如下面的图，我想实现这样的效果：点击edit时可以编辑该行的数据，当编辑到一半时突然不想编辑该行的数据而是要编辑其它行的数据，这时候点击其他行的edit时可以对其他行进行编辑，而原来编辑到一半的那一行自动恢复原来的数据，请问这个函数该怎样写？我试了几种方法都不行，想请问一下大家，下面附带我的源码

<h1>success.vm</h1>



$webResourceManager.requireResource("com.shan.PipeLine:PipeLineResource")  



<form method='post' id='Form1'>

<table class="aui" width="700">

	

	<div class="search-container">

    	<a href="#" class="aui-button" id="newID" onclick="javascript:newone()">new</a>

    </div>

<thead >

	<tr >

		<th width="120" align="left" heigth="8">

			Date

        </th>

		<th width="120" align="left" heigth="8">

			Plan

        </th>

		<th width="120" align="left" heigth="8">

			Actual

        </th>

		<th width="120" align="left" heigth="8">

			Operation

        </th>

    </tr>

</thead>

<tbody >

#foreach($l in $list)

	<tr id="data$l.getID()">

		<td id="date$l.getID()" >

			#set($year=$l.getPipelineDate().getYear()+1900)

			#set($minus='-')

			#if($month<9)

				#set($month="0$month")

			#end				

			#set($yearmonth=" $year$minus$month")		

			$yearmonth

        </td>

		<td id="plan$l.getID()">

			$l.getPipelinePlan()

        </td>

		<td id="actual$l.getID()">

			$l.getPipelineActual()

        </td>

		<td >

		    <input class="aui-button" id="editID" type="button" onclick="javascript:edit($l.getID())" value="Edit">

            <input type="button" id="deleteID" class="aui-button" onclick="javascript:deletes($l.getID())" value="Delete" />

        </td>

    </tr>

#end



</tbody>

</table>

</form>

<img src="/download/resources/com.shan.PipeLine:PipeLineResource/images/example.png" />





<script type="text/javascript">

function newone() {



    if (window['added'] == 0) {

        var s = inputstring(-1);

        $('tbody').html(s + $('tbody').html());

        window['added'] = 1;

        window['edited'] = 1;

        window['deleted'] = 1;

    }

    

     document.getElementById('newID').disabled = false;

     $('input[id="editID"]').attr('disabled',true);

     $('input[id="deleteID"]').attr('disabled',true);

    

}

window['added'] = 0;

window['edited'] = 0;

window['deleted'] = 0;





function inputstring(id) {

    var strings;



    if (id == -1) {

        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'>	<a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"

    } else {

        var date = $('#date' + id).text();

        var plan = $('#plan' + id).text();

        var actual = $('#actual' + id).text();

		date=date.trim();

        date=date+'-01';		

		console.info(date);

		date=date.trim();

		console.info(date);

        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'>	<a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a></td>"