jquery js 可编辑表格

/*
* 可编辑表格
* @author 肖杨
* 基于jquery
* 需要 绘制一个表格td id=list 主键标识  input test 初始隐藏,id=input_主键标识
* 如:<td>
<span id="movieAge_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="movieAge"/>
</span>
<span><input id="input_movieAge_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" name="oa.movieAge"/></span>
<span><input value="<s:property value="movieAge"/>"
type="checkbox" id="checkbox_movieAge_<s:property value="movieId"/>"
style="display: none;"
name="movieAge"/></span>
</td>
*/
$( function() {
$("input[id^='input_']").each( function() {
$(this).keydown( function(event) {
if (event.keyCode == 13) {
inputBlur(this);
return false;
}

})
});
});
function tdclick(text) {// 双击
// 隐藏本身
text.style.display = "none";
// 显示隐藏的input
var tid = text.id;
var inputtemp = document.getElementById("input_" + tid);
inputtemp.value = text.innerHTML;
inputtemp.style.display = "block";

}
// 失去焦距
function inputBlur(text) {
// 取得td
var temp = text.id;
var inputid = temp.substring(6, temp.length);
// 赋值
var inputtemp = document.getElementById(inputid);
inputtemp.innerHTML = text.value;

// 启用box模式，用来往后台传数组
forChebox(inputid, text.value);
// 移开 隐藏input 赋值本身
text.style.display = "none";
inputtemp.style.display = "block";
}

function forChebox(id, value) {
var checkboxid = "checkbox_" + id;
var boxtemp = document.getElementById(checkboxid);
boxtemp.value = value;
}

function boxClick(check, id) {
var temp = "input[id$='_" + id + "'][type=checkbox]";
if (check.checked) {
$(temp).attr("checked", true);
} else {
$(temp).attr("checked", false);
}
}

<form action="indent_oaInter.action" method="post" id="indentsform">
<table width="100%"  class="table_list">
<tr class="table_01">
<th scope="col">选择</th>
<th scope="col">影片姓名</th>
<th scope="col">影片类型	</th>
<th scope="col">时长	</th>
<th scope="col">字幕语种	</th>
<th scope="col">声道语种	</th>
<th scope="col">国家和地区</th>
<th scope="col">影片年份</th>
</tr>

<s:iterator value="list" status="status">
<tr align="center" bgcolor="#E0E0E0">
<td>
<input name="clickrow" type="checkbox" value="<s:property value="movieId"/>" name="allcheck"  onclick="boxClick(this,<s:property value="movieId"/>)"/>
<input type="checkbox" value="<s:property value="movieId"/>"
id="checkbox_movieId_<s:property value="movieId"/>" name="movieId"
style="display: none;"/>
</td>
<td>
<span id="movieName_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="movieName"/>
</span>
<span><input id="input_movieName_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" value="<s:property value="movieName"/>" name="oa.movieName"/></span>
<span>
<input type="checkbox" value="<s:property value="movieName"/>"
id="checkbox_movieName_<s:property value="movieId"/>" name="movieName"
style="display: none;"/>
</span>
</td>

<td>
<span id="movieType_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="movieType"/>
</span>
<span><input value="<s:property value="movieType"/>"
id="input_movieType_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" name="oa.movieType"/></span>
<span><input value="<s:property value="movieType"/>"
type="checkbox" id="checkbox_movieType_<s:property value="movieId"/>"
style="display: none;"
name="movieType"/></span>
</td>
<td>
<span id="movieTimeLength_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="movieTimeLength"/>
</span>
<span><input id="input_movieTimeLength_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" value="<s:property value="movieTimeLength"/>" name="oa.movieTimeLength"/></span>
<span><input value="<s:property value="movieTimeLength"/>"
type="checkbox" id="checkbox_movieTimeLength_<s:property value="movieId"/>"
style="display: none;"
name="movieTimeLength"/></span>
</td>

<!-- 字幕 -->
<td>
<span id="languageType_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="languageType"/>
</span>
<span><input id="input_languageType_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" value="<s:property value="languageType"/>" name="oa.languageType"/></span>
<span><input value="<s:property value="languageType"/>"
type="checkbox" id="checkbox_languageType_<s:property value="movieId"/>"
style="display: none;"
name="languageType"/></span>
</td>
<!-- 声道 -->
<td>
<span id="track<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="track"/>
</span>
<span><input id="input_track_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" name="oa.track"/></span>

<span><input id="input_track_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" value="<s:property value="languageType"/>" name="oa.track"/></span>
<span><input value="<s:property value="track"/>"
type="checkbox" id="checkbox_track_<s:property value="movieId"/>"
style="display: none;"
name="track"/></span>
</td>

<td>
<span id="area_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="area"/>
</span>
<span><input id="input_area_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" name="oa.area"/></span>
<span><input value="<s:property value="area"/>"
type="checkbox" id="checkbox_area_<s:property value="movieId"/>"
style="display: none;"
name="area"/></span>
</td>

<td>
<span id="movieAge_<s:property value="movieId"/>" ondblclick="tdclick(this)">
<s:property value="movieAge"/>
</span>
<span><input id="input_movieAge_<s:property value="movieId"/>" style="display: none;"
onblur="inputBlur(this)" name="oa.movieAge"/></span>
<span><input value="<s:property value="movieAge"/>"
type="checkbox" id="checkbox_movieAge_<s:property value="movieId"/>"
style="display: none;"
name="movieAge"/></span>
</td>
</tr>
</s:iterator>
</table>
<input type="button" value="提交" onclick="TJsub()"/>
</form>