如何在Jquery中获取data-id属性值

How to get data-id attribute value in Jquery?

本文关键字：data-id 属性 获取 Jquery      更新时间：2023-09-26

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>

我必须尝试从使用Jquery以以下方式获得data-id属性值

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

但返回undefined如何从jquery获得数据id值?我有另一个疑问，数据id值可以保存数值或字符串值?

您需要在内联点击处理程序中传递当前元素上下文，如

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

然后通过传递的element引用得到data-id。您也可以使用HTMLElement.dataset属性，如elem.dataset.id 

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

另外，我建议你使用jquery来绑定事件处理程序，而不是丑陋的内联点击处理程序。

jquery的一个重要部分是操作DOM。

DOM =文档对象模型:文档对象模型(DOM)是一个平台和语言无关的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。

它有几个DOM操作:

  1. :文本(),html(),和瓦尔()
  2. 获取属性: attr()

现在，如果你必须在点击按钮或其他东西时访问特定的属性，那么使用这个:

这是我的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
}); 


 $(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"/>

您可以使用Javascript的数据集或JQuqery的data方法:

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

你的代码是正确的，所有需要做的就是把它传递给你的函数，如:

<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);
}
相关文章：