怎么把动态生成的table表格中的所有td绑定上单击事件,当点击td的时候变成编辑状态。

我也知道可以在td标签上绑定单击事件,然后在td中加入文本框,但是我死活就是绑定不上td,为什么?就包括我在网页上只写一个td,里面写一个按钮,我绑定这个按钮都绑定不上为什么?

这是我在百度找的,也不行啊。点按钮都没效果啊。

  1. <!doctype html> tr{height: 20px;width: 300px;} td{width: 200px;} .hid{display: none;}
    序号姓名年龄性别操作
    1tom18添加 修改 删除
    2jone28添加 修改 删除
    3lily21添加 修改 删除
    添加 修改 删除

$("table td").click(function(){ 执行……});
你的绑定不上,需要你把你的写法贴出来才能知道原因

 <!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    tr{height: 20px;width: 300px;}
    td{width: 200px;}
    .hid{display: none;}
    </style>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//点击添加
$("#add").click(function(){
    //01 克隆
    alert("1111111");
    var $tr = $(".hid").clone(true);
    //disply=block
    $tr.removeClass("hid");
    //把修改按钮的值为保存
    $tr.find("button:contains('修改')").html("保存");
    //02 after()
    $(this).closest("tr").after($tr);
    resetIndex();
});
//点击修改
$(".update").click(function(){
    //可操作的全部区域
    var $tds = $(this).parents("tr").children("td").not(":first,:last");
    //点击修改按钮的时候,先判定是修改还是保存
    var $content = $(this).html();
    if ($content=="修改") {
    //如果是修改,给每个操作的td添加一个input标签        
        $tds.each(function(){
            $(this).html("<input type='text' value='"+$(this).html()+"'>")
        });
        $(this).html("保存")
    }else{
    //如果是保存,将修改的内容保存下来
        $tds.each(function(){
            var contentIn= $(this).children("input").val()
            $(this).html(contentIn);
        });
        $(this).html("修改")
    }
});
//点击删除
$(".del").click(function(){
    $(this).parents("tr").remove();//将对应的一行删除
    resetIndex();
});
});
function resetIndex(){
    //计算序号
        $("tr>td:first-child").each(function(index,element){
            $(this).html(index+1)
        })
}
</script>
</head>
<body>
<table border="1px" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>tom</td>
        <td>18</td>
        <td>男</td>
        <td>
            <button class="add">添加</button>
            <button class="update">修改</button>
            <button class="del">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>jone</td>
        <td>28</td>
        <td>男</td>
        <td>
            <button class="add">添加</button>
            <button class="update">修改</button>
            <button class="del">删除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>lily</td>
        <td>21</td>
        <td>女</td>
        <td>
            <button class="add">添加</button>
            <button class="update">修改</button>
            <button class="del">删除</button>
        </td>
    </tr>
    <tr class="hid">
        <td></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td>
            <button class="add">添加</button>
            <button class="update">修改</button>
            <button class="del">删除</button>
        </td>
    </tr>
</table>



</body>
</html>

http://download.csdn.net/download/w172087242/9604430
这个是我之前写的一个编辑的,希望能够帮到你...

如果有帮助,希望采纳,如果有问题,可以继续回馈

你这个#add 是根据id选择的啊 你没有id = add 的

你的add是类名称,又不是id选择器,你用id选择器获取不到dom对象了

  $("#add").click(function () {
 ===>
 $(".add").click(function () {

新创建的table表格,最外层假如有一个父级,通过父级来绑定。然后click的时候textarea执行focus();

$('#tableBox').on('click','td',function(){
this.find('textarea').focus();
})

在 html 里你定义 class='add' 但是在jquery里,你是选取ID = add (#add)

就用jquery选择器然后绑定事件,再做操作啊。另外你还是学会百度吧。想要啥都行。这么效率太低了

表格生成完以后再执行绑定事件
$("#表格ID td").on('click',function(){

alert("你想干啥");

});