Jquery更改table中的内容（一）

标签：

css部分：

.tab{
　　border:solid 1px #00aaee;
　　text-align: left;
　　margin:20px;
}
.tab tr{
　　border-top: solid 1px #00aaee;
}
.tab tr td,.tab tr th{
　　border-right: solid 1px #00aaee;
　　height:35px;
　　width: 200px;
　　padding: 0 5px;
}
.tab tr th{
　　background: #00aaee;
　　color:#fff;
}
.tab input{
　　width: 90%;
　　margin: 0;
　　padding: 3px ;
　　border: solid 1px #00aaee;
}

html部分：

<table class="tab">
    <tr>
        <th>编号</th><th>名称</th>
    </tr>
    <tr>
        <td>1</td><td>辣条</td>
    </tr>
    <tr>
        <td>2</td><td>牛奶</td>
    </tr>
    <tr>
        <td>3</td><td>苹果</td>
    </tr>
    <tr>
        <td>4</td><td>葡萄</td>
    </tr>
</table>


js部分:

$(‘.tab td‘).bind(‘click‘,(function(){
    if($(‘input‘).length > 0){
        $(‘input‘).parent().html($(‘input‘).val());
    }
    var current = $(this);
    if(current.children(‘input‘).length > 0){
        return false;
    }
    var txt = current.html();
    current.html(‘‘);
    var inputObj  = $("<input type=‘text‘>").val(txt).appendTo(current);
    inputObj.click(function(){
        return false
    })
}));

Jquery更改table中的内容（一）

标签：

原文地址：http://www.cnblogs.com/LingZi-0214/p/5799666.html