使当前 HTML 行可编辑答案

【问题标题】：Make current HTML row editable使当前 HTML 行可编辑
【发布时间】：2015-09-09 14:46:42
【问题描述】：

在屏幕截图中，我希望能够使用编辑图像的 onClick 事件来使同一行的 5 个进行中的文本框可编辑。默认情况下，我将它们设置为“只读”。我一直在寻找其他解决方案，但我不确定如何引用当前行。

<table class = "idtable" cellspacing="0">                                                
    <tr style="background-color:#999999;color:white">
      <th width="200px" class="tablehead">Type</th>
      <th width="200px" class="tablehead">Value</th>
      <th width="200px" class="tablehead">State</th>
      <th width="200px" class="tablehead">Status</th>
      <th width="200px" class="tablehead">Entry Date</th>
      <th width="100px" class="tablehead">Edit</th>
      <th width="100px" class="tablehead">Delete</th>
    </tr>   

    <tr style="text-align:center">
      <td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
      <td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234        " readonly></td>
      <td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text"  value="UNMODIFIED" readonly></td>
      <td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
      <td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
      <td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
      <td class="idtable-borderright"><a href="/xxxxx/timeServ.do?formName=updateIDs&delete=true&assocID=5320&credID=1234" ><img src="xxxxx/images/delete.gif"></a></td>
    </tr>                                                   
    <tr>
      <td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
    </tr>                                                   
</table>

【问题讨论】：

我们需要这个表的结构。能否请您为我们发布相关的 HTML？
还有哪些解决方案？请展示您的尝试。
使用您的代码示例开始fiddle，这样会更容易提供帮助。
我的意思是我看过其他解决方案，但它们并不是我真正想要的。
既然你已经在用jquery了，可以试试JQGrid。

标签： javascript jquery html-table

【解决方案1】：

不要使用onClick 标签。

使用jQuery附加到点击事件，然后遍历DOM找到行，最后操作input标签。

在此示例中，我假设您在图像中添加了一个 btnedit 类：

$('.idtable .btnedit').click(function(){
    var row = $(this).closest('tr'); //find the parent row
    var inputs = $('input', row); //find all the inputs inside the row
    inputs.prop('readonly', false); //change the attribute
});

小提琴：http://jsfiddle.net/o26q8w6j/

【讨论】：

【解决方案2】：

你需要使用 jQuery editable 之类的东西。

尝试在下面的演示中双击文本

http://www.appelsiini.net/projects/jeditable/default.html

您需要触发 ajax 调用来更新数据库中的数据。

【讨论】：