Question

我在另一篇文章中提出了一个问题。

Making row editable when hit row edit button

有人发布了这个：http://jsfiddle.net/qX7v2/1/ 我修改过的帖子：http://jsfiddle.net/qX7v2/390/

我被告知我应该将它用于HTML文件：

<input class="editbtn" type="button" value="Edit">

而不是：

<button class="editbtn">Edit</button>

但是，当我换掉按钮代码的输入代码时，我点击编辑按钮，没有任何反应。

我的问题是为什么它不起作用？

Answer 1

id中

document元素应该是唯一的，请使用class="editbtn"。同样.val()代替.html()，<input> .innerHTML不是元素＆＃39; .value

<body>
  <table id="tableone" border="1">
    <thead>
      <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
        <th class="col3">Header 4</th>
      </tr>
    </thead>
    <tr class="del">
      <td contenteditable="true">Row 0 Column 0</td>
      <td>
        <input class="editbtn" type="button" value="Edit">

      </td>
      <td contenteditable="false">Row 0 Column 1</td>
      <td contenteditable="false">Row 0 Column 2</td>
    </tr>
    <tr class="del">
      <td contenteditable="false">Row 1 Column 0</td>
      <td>
        <input class="editbtn" type="button" value="Edit">

      </td>
      <td contenteditable="false">Row 1 Column 1</td>
      <td contenteditable="false">Row 1 Column 2</td>
    </tr>
  </table>
  <input id="btnHide" type="button" value="Hide Column 2" />
</body>

  $(document).ready(function() {
    $('#btnHide').click(function() {
      //$('td:nth-child(2)').hide();
      // if your table has header(th), use this
      $('td:nth-child(3),th:nth-child(3)').hide();
    });
  });


  $(document).ready(function() {
    $('.editbtn').click(function() {
      var currentTD = $(this).parents('tr').find('td');
      console.log($(this).val())
      if ($(this).val() == 'Edit') {
        currentTD = $(this).parents('tr').find('td');
        $.each(currentTD, function() {
          $(this).prop('contenteditable', true)
        });
      } else {
        $.each(currentTD, function() {
          $(this).prop('contenteditable', false)
        });
      }

      $(this).val($(this).val() == 'Edit' ? 'Save' : 'Edit')

    });

  });

jsfiddle http://jsfiddle.net/qX7v2/382/

从按钮类更改为输入类

1 个答案: