javascript - How to get data-id attribute value in Jquery?

HTML CODE

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

And i have to tried to get data-id attribute value from using Jquery in following way

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

but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?

HTML CODE

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

And i have to tried to get data-id attribute value from using Jquery in following way

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

but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?

Share Improve this question edited Sep 1, 2016 at 6:40 Mr.7 2,7131 gold badge23 silver badges36 bronze badges asked Sep 1, 2016 at 6:20 Balakumar B 7905 gold badges19 silver badges41 bronze badges

Possible duplicate of How to get the data-id attribute? – Mr.7 Commented Sep 1, 2016 at 6:29

Add a ment |

6 Answers 6

Sorted by: Reset to default 13

You need to pass the current element context in inline click handler like

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

Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id

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

Additionally, I would remend you use jquery to bind event handler's instead of ugly inline click handler.

One of the important part of jquery is manipulate the DOM.

DOM = Document Object Model : Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

It has several DOM Manipulation :

Get Content : text(), html(), and val()
Get Attributes : attr()

Now if u have to access a particular attribute on click of button or something else then use this :

so here is my HTML

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

<button>Click Here</button>

then u have to access the attributes of anchor tag like this:

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

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

<script src="https://ajax.googleapis./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"/>

You can use Javascript's dataset or JQuqery data method:

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

<script src="https://ajax.googleapis./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>

Your code is correct, all need to do is pass this to your function like:

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

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);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get data-id attribute value in Jquery? - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)