獲取數據屬性並以引導模式顯示

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。

好運