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>

如图：