ボタンを使用してテーブル内の値をリセットする

Question

私のテーブルの値の1つをリセットするボタンを取得しようとしていますが、機能しません。ここでは、コードは次のとおりです。

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

任意の助けいただければ幸いです。

Answer 1

A TD要素が値を持っていない、あなたがtext()を使用したいので、それは、テキストコンテンツを持っている、とあなたは

$(document).ready(function() { 
 
    $("#reset").on("click", function() { 
 
     $('#time').text(function() { 
 
     \t 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>

Answer 2

データ属性を返すために、コールバックを使用することができます

jsfiddle

問題はval()です。これは、フォーム値でのみ使用されるため、機能しません。

使用.text()代わり

Answer 3

あなたは間違ってVal関数を使用しています。 valは、入力要素の値を追加/変更するために使用されます。

html()またはtext()によって行われるtdのプロパティを変更するには、innerHTMLを変更します。

html（） - 要素内のhtmlを置き換えます。 HTMLタグはブラウザでサポートされ、レンダリングされます

テキスト（） - 要素内のテキストを置き換えます。 HTMLマークアップ）がサポートされていないと

ヴァルを（レンダリングされていない - HTMLの入力タグ

データのデータ（）を設定するために使用され - 任意のHTMLに任意の値を設定/取得するために使用され後でelement.data('attribute_name')

を使用して取得することができdata-attribute_nameの形態のタグは、ここではそれらのすべてを読む：

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')); 
 
       }); 
 
      }); 
 
\t \t });

<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>