jq遍历table怎么进行点击td进行编辑
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$("#cha")
.click(
function() {
$
.ajax({
url : 'msg/selHis',
type : 'POST',
dataType : 'json',
data : {
StartDate : $("#qi").val(),
EndDate : $("#zi").val()
},
success : function(msg) {
var tb = document
.getElementById("set");
for (var n = tb.rows.length - 1; n > 0; n--) {
tb.deleteRow(n);
}
for (i = 0; i < msg.length; i++) {
$("#set")
.append(
"<tr><td><input class = 'check' type='checkbox'></td><td>"
+ (msg[i].yybh == undefined ? " "
: msg[i].yybh)
+ "</td><td>"
+ (msg[i].jyckh == undefined ? " "
: msg[i].jyckh)
+ "</td><td>"
+ (msg[i].posjysj == undefined ? " "
: msg[i].posjysj)
+ "</td><td>"
+ (msg[i].sfzhm == undefined ? " "
: msg[i].sfzhm)
+ "</td><td>"
+ (msg[i].jylx == undefined ? " "
: msg[i].jylx)
+ "</td><td>"
+ (msg[i].posjyje == undefined ? " "
: msg[i].posjyje)
+ "</td><td>"
+ (msg[i].shh == undefined ? " "
: msg[i].shh)
+ "</td><td>"
+ (msg[i].zdbh == undefined ? " "
: msg[i].zdbh)
+ "</td><td>"
+ (msg[i].bhcfybz == undefined ? " "
: msg[i].bhcfybz)
+ "</td><td>"
+ (msg[i].bz1 == undefined ? " "
: msg[i].bz1)
+ "</td><td>"
+ (msg[i].bz2 == undefined ? " "
: msg[i].bz2)
+ "</td><td>"
+ (msg[i].bz3 == undefined ? " "
: msg[i].bz3)
+ "</td></tr>")
}
}
});
});
$('table tr td').click(
function() {
if (!$(this).is('.input')) {
$(this).addClass('input').html(
'<input type="text" value="' + $(this).text()
+ '" />').find('input').focus().blur(
function() {
var thisid = $(this).parent().siblings(
"th:eq(0)").text();
var thisvalue = $(this).val();
var thisclass = $(this).parent().attr(
"class");
$.ajax({
type : 'POST',
url : 'update.php',
data : "thisid=" + thisid
+ "&thisclass=" + thisclass
+ "&thisvalue=" + thisvalue
});
$(this).parent().removeClass('input').html(
$(this).val() || 0);
});
}
}).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<div>
起:<input id="qi" class="easyui-datebox" /> 止:<input id="zi"
class="easyui-datebox" /> <input id="cha" type="button" value="查询" />
<input id="upload" type="button" value="上传选中交易">
<table id="set" border="1" cellpadding="0" cellspacing="0"
bordercolor="E7F0FF">
<tr bgcolor="E7F0FF">
<th>选择</th>
<th>医药机构编号</th>
<th>POS签购单交易参考号</th>
<th>POS交易时间</th>
<th>身份证号码</th>
<th>交易类型</th>
<th>POS交易金额</th>
<th>商户号</th>
<th>终端编号</th>
<th>包含处方药标志</th>
<th>备注1</th>
<th>备注2</th>
<th>备注3</th>
</tr>
</table>
</div>
</body>
</html>
点击td时，把当前td内容隐藏，换成input标签，就能编辑了，建议使用jquery easyui，里面功能丰富
$("#table_id tbody tr").each(function(){
var a = $(this).children();//获取每一行
var arr =a[2].innerText;//取得第三列的值
if(arr......比较)
a[1].firstElementChild.setAttribute("checked","checked");
//给第二列添加一个属性checked
});
table_id是table的id，接着tbogy tr是为了更进一步找到这元件。
可以看看给td加一个 contenteditable = 'true' ，让元素可编辑状态
备注1后面的onclick事件 传参数唯一编号
jquery 根据
$("#bz1_唯一编号") 控制显示隐藏 $("#bz1_imput__唯一编号") 获取input值
$("#bz2_唯一编号") 控制显示隐藏 $("#bz2_imput__唯一编号") 获取input值
建议使用easyui datagrid
可以指定属性标签和值进行选取
$(function () { $("td").click(function (event) { //td中已经有了input,则不需要响应点击事件 if ($(this).children("input").length > 0) return false; var tdObj = $(this); var preText = tdObj.html(); //得到当前文本内容 var inputObj = $("<input type='text' />"); //创建一个文本框元素 tdObj.html(""); //清空td中的所有元素 inputObj .width(tdObj.width()) //设置文本框宽度与td相同 .height(tdObj.height()) .css({ border: "0px", fontSize: "17px", font: "宋体" }) .val(preText) .appendTo(tdObj) //把创建的文本框插入到tdObj子节点的最后 .trigger("focus") //用trigger方法触发事件 .trigger("select"); inputObj.keyup(function (event) { if (13 == event.which) //用户按下回车 { var text = $(this).val(); tdObj.html(text); } else if (27 == event.which) //ESC键 { tdObj.html(preText); } }); //已进入编辑状态后，不再处理click事件 inputObj.click(function () { return false; }); }); });