Changing from button class to input class

Question

I have a question from another post.

Making row editable when hit row edit button

Someone posted this: http://jsfiddle.net/qX7v2/1/ My Modified post: http://jsfiddle.net/qX7v2/390/

I was taught that I should use this for the HTML file:

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

Rather than this:

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

However, I when I swap out the input code for the button code, I click on edit button, nothing happen.

My question is why does it not work?

The button is referenced by a `class` attribute, the input element by an `id` attribute. — holmberd, Oct 12 '17 at 21:11

score 0 · Accepted Answer · answered Oct 12 '17 at 20:58

id of element in document should be unique, use class="editbtn". Also substitute .val() for .html(), <input> .innerHTML is not the elements' .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/

Changing from button class to input class

1 Answers1