从按钮类更改为输入类[重复]答案

【问题标题】：Changing from button class to input class [duplicate]从按钮类更改为输入类[重复]
【发布时间】：2018-03-24 22:15:01
【问题描述】：

我有另一个帖子的问题。

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>

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

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

【问题讨论】：

@Taplar 这不是代码的唯一问题
按钮由class 属性引用，输入元素由id 属性引用。
我忘了把id改成class。谢谢。

标签： javascript jquery button

【解决方案1】：

document 中元素的id 应该是唯一的，使用class="editbtn"。也用.val()代替.html()，<input>.innerHTML不是元素的.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/

【讨论】：