如何用js实现点击按钮使table某一单元格变为可编辑状态

JavaScript07

如何用js实现点击按钮使table某一单元格变为可编辑状态,第1张

具体步骤

1.复制原来那个单元格里面的内容到一个变量

2.将那个单元格的内容替换为一个输入框(input)

3.将那个变量的内容赋值给输入框

反向操作:

1.取得输入框里的内容并赋值给一个变量

2.将单元格清空,并将那个变量的值填写到单元格里

先说思路:

当点击某一行的时候,能得到这个tr的对象,可以通过这个对象得到该行的所有td对象,这时候可以通过一个序号来获取这一行的某个td的数据。

下面以代码来解释

<table id="tb">

    <tr>

        <td>a</td><td>b</td><td>c</td>

    </tr>

    <tr>

        <td>aa</td><td>bb</td><td>cc</td>

    </tr>

</table>

<script>

    //以jquery为例实现点击某行获得某个td的数据

    $( "#tb tr" ).click( function() {//给每行绑定了一个点击事件

        var td = $( this ).find( "td" )//this指向了当前点击的行,通过find我们获得了该行所有的td对象

        //题中说到某个td,为了演示所以我们假设是要获得第3个td的数据

        var data = td.eq( 2 ).html()//通过eq可以得到具体的某个td对象,从而得到相应的数据

    } )

</script>

综上,我们就实现了通过点击某行获得某个td的数据。