获取数据属性并以引导方式显示 [英] get data attribute and show in bootstrap modal

问题描述

我有几个表行，每个表行都附加有data属性.当我单击每个表行时，我想打开模式，以及如何获取数据属性，td值并在tr单击时显示在模式特定字段ID中

I have a couple of table rows that each have data attribute attached. when i click on each table row i want to open modal and How do i get the data attribute, td value and display in modal specific field id on tr click

表

<table class="table table-striped" id="fileInfo" data-toggle="modal" data-target="#modalInfo">
<thead>
    <th>Name</th>
    <th>Type</th>
    <th>Date Modified</th>       
</thead>
<tbody>
    <tr class="file" data-name="sample.jpg">
        <td>sample.jpg</td>
        <td>JPG</td>
        <td>12.24.2015</td>
    </tr>
    <tr class="file" data-name="sample2.jpg">
        <td>sample2.txt</td>
        <td>TXT</td>
        <td>12.24.2015</td>
    </tr>        
</tbody>  

jQuery

$('#modalInfo').modal({
    keyboard: true,
    backdrop: "static",
    show:false,

}).on('show', function(){
    var getIdFromRow = $(event.target).closest('tr').data('name');
    $(this).find(".filename").html(getIdFromRow);
});

JSFIDDLE

推荐答案

首先，让我们获取像这样的数据值.

First, lets take the data value like this.

$( ".file" ).click(function() {
  //we only use $(this).cata(); since Jquery library do the Bind() method for us.
  var valueText = $(this).data();
    console.log(valueText.name);
    document.getElementById("demo").innerHTML = valueText.name;
});

还可以将显示"事件更改为此.

Also lets change the 'show' event to this.

.on('click', function(event){
        //Here just show a console with the DOM Input element, you can remove it if you want.
        getInput = document.getElementById('demo')
        console.log(getInput)
    });

因此，在这里，我们使用 data 函数从.file类中获取值，然后正在使用document.getElementById("demo").innerHTML = valueText.name;将其插入输入中.

So here we get the value from the .file class using the data function, and we are using document.getElementById("demo").innerHTML = valueText.name; to insert them into the input.

这是 JSfiddle .

祝你好运

这篇关于获取数据属性并以引导方式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！