js从table的当前位置获取当前行的元素和td中的前后元素

本文介绍了一个简单的表格编辑功能实现方案,包括如何通过JavaScript操作DOM元素来实现单元格内容的编辑、保存及删除等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<tr>
                <td>第一个单元格</td>

                <td>

                      <input readonly=true type='text' id='itemName' name='itemName' value=‘1’ />

                </td>

                <td>
                        <input disabled=true type='radio' onclick='' name='radio"+list[i].id+"' value=0 />是
                        <input disabled=true type='radio' name='radio"+list[i].id+"' value=1 />否
                </td>
                <td>
                      <a href='javascript:void(0);' onclick='deleteItem()'>删除</a>
                   
                        <a href='javascript:void(0);' onclick='updateItem(this)'>编辑</a>
                     
                        <a href='javascript:void(0);' style='display: none' onclick='save2update()'>保存</a>
                </td>

 </tr>



js

    function updateItem(obj){
        obj.nextElementSibling.style.display='inline';  // 设置后一个a链接的样式
        obj.previousElementSibling.style.display='none';  // 设置前一个a链接的样式

 
          //设置当前行中的第二个td中input的readOnly

        obj.parentNode.parentNode.childNodes[1].getElementsByTagName("INPUT")[0].readOnly=false; 

//设置当前行中的第三个td中input的disabled

        obj.parentNode.parentNode.childNodes[2].getElementsByTagName("INPUT")[0].disabled=false;
        obj.parentNode.parentNode.childNodes[2].getElementsByTagName("INPUT")[1].disabled=false;


    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值