获取数据属性并以引导模式显示

Question

我有几个表格行，每个表格行都附加了数据属性。当我在每个表行点击我要打开模态和我要如何在TR上点击

表

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

模态特定域ID的数据属性，TD值和显示

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

Answer 1

首先，让我们取这样的数据值。

$(".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; 
}); 

还可以将'show'事件更改为此。

.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;将它们插入到输入。

这里是JSfiddle。

好运