Como obter o valor do atributo data-id em Jquery?
CÓDIGO 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>
e eu tenho que tentar obter o valor do atributo data-id de usar o Jquery da seguinte forma
function ShowModal(){
alert($(this).attr("data-id"));
}
1
6 answers
Você precisa passar o contexto do elemento actual no manipulador de teclas incorporado como
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
Então use a referência passada element para obter o data-id. Você também pode usar HTMLElement.dataset propriedades semelhantes elem.dataset.id
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
Além disso, recomendo que use o jquery para ligar o controlador de eventos em vez do controlador de click inline feio.
8
Author: Satpal, 2016-09-01 06:30:51
Uma das partes importantes do jquery é manipular o DOM.
DOM = Document Object Model : Document Object Model (DOM) é uma interface plataforma e linguagem neutra que permite aos programas e scripts acessar dinamicamente e atualizar o conteúdo, estrutura e estilo de um documento.
Tem várias manipulações DOM:
- Get Content : text (), html (), and val ()
- Obter Atributos : attr ()
Agora, se tiver de aceder a um atributo em particular, carregue no botão ou em qualquer outra coisa, então use isto:
Então aqui está o meu HTML
<p><a href="http://www.google.com" id="test" data-id="id_12345">google.com</a></p>
<button>Click Here</button>
Então você tem que acessar os atributos da marca de âncora assim:
$("button").click(function(){
alert($("#test").attr("href")); // output : http://www.google.com
alert($("#test").attr("data-id")); // output : id_12345
});
3
Author: Rahul Pawar, 2016-09-02 10:03:04
$(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"/> 1
Author: Chamith Saranga, 2016-09-01 06:46:44
Pode utilizar o conjunto de dados de Javascript ou JQuqery data Método:
$(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> 0
Author: Morteza Tourani, 2016-09-01 06:34:57
O seu código está correcto, tudo o que precisa de fazer é passar isto para a sua função como:
<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>
0
Author: Abhishek Dhanraj Shahdeo, 2016-09-01 06:40:40
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);
}
0
Author: Nitya Kumar, 2016-09-01 06:42:00