Using button to reset value in a table

Question

I'm trying to get a button to reset one of the values in my table, however it's not working. Here is the code:

HTML

<table class="table table-bordered" id="table">
  <thead>
    <tr>
      <th>Time</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="time" data-default="00:00">48:25</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

<button type="button" class="btn btn-block btn-danger" id="reset">Reset</button>

jQuery

  $(document).ready(function() {
        $("#reset").on("click", function() {
          $('#table').find('#time').each(function() {
            $(this).val($(this).attr("data-default"));
          });
        });

JSFiddle

Any help would be greatly appreciated.

score 0 · Accepted Answer · answered Oct 23 '16 at 15:03

A TD element doesn't have a value, it has text content, so you'd use text(), and you could use a callback to return the data-attribute

$(document).ready(function() {
    $("#reset").on("click", function() {
        $('#time').text(function() {
         return $(this).data('default');
        })
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered" id="table">
    <thead>
        <tr>
            <th>Time</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="time" data-default="00:00">48:25</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

<button type="button" class="btn btn-block btn-danger" id="reset">Reset</button>

score 0 · Answer 2 · answered Oct 23 '16 at 15:05

0

jsfiddle

The problem is you use val() . It does not work because it is only to be used with form values only.

Use .text() instead

answered Oct 23 '16 at 15:05

THCoder

142
10

score 0 · Answer 3 · edited May 23 '17 at 12:33

You are incorrectly using the val function. val is used to add/change the value of an input element.

What you are looking for is to alter the innerHTML property of the td, which is done by html() or text().

html() - replaces html inside an element. HTML tags are supported and rendered by browser

text() - replaces text inside an element. HTML markup is not supported and not rendered

val() - is used to set data in input tags of HTML

data() - is used to retrieve/set any arbitrary value in any html tag in the form of data-attribute_name, which can be later retrieved using element.data('attribute_name')

Read all of them here:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

What is the difference between jQuery: text() and html() ?

Difference between val() and text()

https://api.jquery.com/data/

$(document).ready(function() {
            $("#reset").on("click", function() {
              $('#table').find('#time').each(function(index, element) {
                $(this).html($(this).data('default'));
              });
            });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table">
  <thead>
    <tr>
      <th>Time</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="time" data-default="00:00">48:25</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
<button type="button" class="btn btn-block btn-danger" id="reset">Reset</button>

Using button to reset value in a table

3 Answers3