Jqueryでdata-id属性の値を取得するには？

Question

HTMLコード

<tbody> 
    <tr> 
     <td>0</td> 
     <td>204093D-P12</td> 
     <td>80443</td> 
     <td>Name</td> 
     <td><span class="label label-success">Updated</span></td> 
     <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td> 
    </tr><tr> 
     <td>1</td> 
     <td>216619D-P18</td> 
     <td>16009</td> 
     <td>Name</td> 
     <td><span class="label label-success">Updated</span></td> 
     <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td> 
    </tr><tr> 
     <td>2</td> 
     <td>21663P0012</td> 
     <td>13116</td> 
     <td>Name</td> 
     <td><span class="label label-success">Updated</span></td> 
     <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td> 
    </tr><tr> 
     <td>3</td> 
     <td>217496D-P078</td> 
     <td>16032</td> 
     <td>Name</td> 
     <td><span class="label label-success">Updated</span></td> 
     <td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td> 
    </tr> 
</tbody>  

と私は道

function ShowModal(){ 
     alert($(this).attr("data-id")); 
} 

が、jqueryのからデータ-id値を取得する方法をundefinedを返すが、次でのjQueryを使用してからデータ-id属性の値を取得しようとしましたする必要がありますか？と私はもう一つの疑問を持っているデータID値は数値または文字列の値を保持することができますか？

Answer 1

あなたはdata-idを取得するために渡されたelement参照を使用すると

<button onClick="ShowModal(this)" data-id="217496D-P078"></button> 

のようなインラインクリックハンドラに現在の要素のコンテキストを渡す必要があります。あなたはまた、さらにelem.dataset.id

function ShowModal(elem){ 
    var dataId = $(elem).data("id"); 
    alert(dataId); 
} 

ようHTMLElement.datasetプロパティを使用することができ、私はあなたがイベントハンドラの代わりに醜いインラインクリックハンドラをバインドするjqueryを使用することをお勧めします。

Answer 2

jqueryの重要な部分の1つは、DOMを操作することです。

DOM =ドキュメントオブジェクトモデル：ドキュメントオブジェクトモデル（DOM）は、プログラムとスクリプトがドキュメントのコンテンツ、構造、およびスタイルに動的にアクセスして更新できるようにするプラットフォームおよび言語に依存しないインターフェイスです。

これは、いくつかのDOM操作があります。

1. コンテンツ取得：テキストを（）、HTML（）、とval（）
2. GETは属性：ATTR（）

を今、ボタンや何か他のものをクリックして特定の属性にアクセスする必要がある場合は、次のようにしてください：

はので、ここでその後、uは次のようにアンカータグの属性にアクセスする必要が私のHTML

<p><a href="http://www.google.com" id="test" data-id="id_12345">google.com</a></p> 

<button>Click Here</button> 

です：あなたが使用することができます

$("button").click(function(){ 
    alert($("#test").attr("href")); // output : http://www.google.com 
    alert($("#test").attr("data-id")); // output : id_12345 
}); 

Answer 3

をJavascriptのデータセットまたはJQuqerydata方法：

$(document).ready(function() { 
 
    $('button').on('click', function() { 
 
    console.log(this.dataset.id, $(this).data().id, $(this).data('id')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tbody> 
 
    <tr> 
 
    <td> 
 
     <button type="button" data-id="1">btn #1</button> 
 
     <button type="button" data-id="2">btn #2</button> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button type="button" data-id="3">btn #1</button> 
 
     <button type="button" data-id="4">btn #2</button> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button type="button" data-id="5">btn #1</button> 
 
     <button type="button" data-id="6">btn# 2</button> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <button type="button" data-id="7">btn #1</button> 
 
     <button type="button" data-id="8">btn #2</button> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
</tbody>

Answer 4

あなたのコードが正しい、すべては何をする必要があるようにあなたの関数にこれを渡しです：データ-id属性を取得する[方法の

<button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal(this)"><i class="fa fa-plus" aria-hidden="true"></i></button> 

Answer 5

You have to create unique data-id in your code data-id not unique. 


data-id="217496D-P078" data-target="#myModal" type="button" title="Add" 
data-id="217496D-P078" data-target="#myModal_edit" type="button" title=" 
data-id="217496D-P078" data-target="#myModal_details" type="button" titl 

then 

Try this 

<button onClick="ShowModal(this)" data-id="217496D-P078"></button> 


function ShowModal(elem){ 
    var dataId = $(elem).data("id"); 
    alert(dataId); 
} 

Answer 6

$(function() { 
 
      $(".inputs").click(function (e) { 
 
       alert($(this).attr("data-id")); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="btn btn-xs btn-flat inputs" value="click" type="button" data-toggle="modal" data-id="217496D-P078" data-target="#myModal"/>