javascript - Contenteditable 不适用于 javascript

Question

我想做的是将行设置为可在单击按钮时编辑。

$(":button").click(function(){

 var tdvar=$(this).parent('tr').find('td');
  $.each(tdvar,function(){
    $(this).prop('contenteditable',true); 
  });
});

  <s:iterator  value="arr">  
      <tr>
        <td contenteditable="false"><s:property value="%{productname}"/></td>
        <td contenteditable="false"><s:property value="%{category}"/></td>
        <td contenteditable="false"><s:property value="%{price}"/></td>
        <td contenteditable="false"><s:property value="%{stock}"/></td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
        <td><button class="edt">edit</button>
        </td>
      </tr>
      </s:iterator>  

Answer 1

查找parent().parent('tr')

$("button").click(function() {
  var tdvar = $(this).parent().parent('tr').find('td'); //change on this line 
  $.each(tdvar, function() {
    $(this).prop('contenteditable', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td contenteditable="false"><s:property value="%{productname}" /></td>
    <td contenteditable="false"><s:property value="%{category}" />1</td>
    <td contenteditable="false"><s:property value="%{price}" />2</td>
    <td contenteditable="false"><s:property value="%{stock}" />3</td>
    <td>
      <span class="table-remove glyphicon glyphicon-remove"></span>
    </td>
    <td>
      <span class="table-up glyphicon glyphicon-arrow-up"></span>
      <span class="table-down glyphicon glyphicon-arrow-down"></span>
    </td>
    <td>
      <button class="edt">edit</button>
    </td>
  </tr>
</table>