td点击编辑问题 请教一下 5C

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 js

7个回答

点击td时,把当前td内容隐藏,换成input标签,就能编辑了,建议使用jquery easyui,里面功能丰富

zhangqwe886
咸鱼zhang丶 获取不到td的点击,写过点击事件没有。。。
一年多之前 回复

$("#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
备注2

后面的onclick事件 传参数唯一编号

jquery 根据
$("#bz1_唯一编号") 控制显示隐藏 $("#bz1_imput__唯一编号") 获取input值
$("#bz2_唯一编号") 控制显示隐藏 $("#bz2_imput__唯一编号") 获取input值

zhangqwe886
咸鱼zhang丶 好的谢谢
一年多之前 回复
a718089112
a718089112 你的是ajax生成的列表吗? 那样的话你的点击事件应该写到 ajax里面,生成td后 再绑定click事件才有效。 最好生成td的时候把input也生成,click只是控制input和td内容的显隐切换
一年多之前 回复
zhangqwe886
咸鱼zhang丶 回复a718089112: 点击就直接用的input的id
一年多之前 回复
a718089112
a718089112 备注2也一样 唯一编号 可以是数据的id
一年多之前 回复
a718089112
a718089112 备注1:<th>备注1<span id='bz1_唯一编号'><input type='text' id='bz1_imput_唯一编号' /></span></th>
一年多之前 回复

建议使用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; }); }); });
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!