请问怎么使用jquery改变一个动态生成的表格中的一行

Question

在使用thinkphp5读取数据库的时候因为是循环读取数据用表格的形式打印出来,并且表格的最后一列有更新按钮,本想实现的功能是点击更新按钮后,当前所点击的行中内容字段1234的html属性变成一个text可输入属性,更新时间,创建时间字段保持不变.

现在遇到的问题是,目前处于学习中,前端基本只会写简单的html,通过百度网上搜索找到相关的办法是使用jquery的.next()和.siblings()遍历获取同辈元素,但是实际操作的时候总是改变了一整列或者全部td标签,表格是循环生成的我已经不知道应该如何获取节点了?

相关代码

     <div class="col-md-12">
            <table class="table table-hover table-bordered">
                <tr class="info">
                    <td>编号</td>
                    <td>字段1</td>
                    <td>字段2</td>
                    <td>字段3</td>
                    <td>字段4</td>
                    <td>创建时间</td>
                    <td>更新时间</td>
                    <td>操作</td>
                </tr>
                {volist name="games" id="vo"}
                <tr>
                        <td>{$vo->id}</td>
                        <td>{$vo->gamename}</td>
                        <td>{$vo->servername}</td>
                        <td>{$vo->days}</td>
                        <td>{$vo->rolename}</td>
                        <td>{$vo->create_time}</td>
                        <td>{$vo->update_time}</td>
                        <td><a href="#" onclick="getElements()">更新</a>/
                            <a href="{:url('delect?id='.$vo->getData('id'))}">删除</a>
                        </td>
                    </tr>
                {/volist}
            </table>
        </div>
    </div>
</div>
<!--加载bootstrap的js文件-->
<script src="__JS__ /bootstrap.min.js"></script>
<script>
    function getElements() {  
      //这里我删掉了完全没有思绪头晕QAQ
    }
</script>

</body>
</html>

根据上述代码,我希望实现的是点击,任意一行,改变当前所点击行数前面的字段1234的属性为text可输入,请问具体思路是什么或者可以提供一个方向我再去网上搜索,前端基础实在是太差,希望大佬能听懂我在说什么QAQ,望解惑

Answer 1

1. 在td中放置一个input标签 通过一个变量来让其显示、隐藏 通过jq的:nth-child(1) 能取到第几项、改变参数状态即可

Answer 2

提前写进去隐藏起来就好了

Answer 3

$(this).parents("tr").find(".xxxClass")