jquery - 获取数据属性并在 Bootstrap 模式中显示

Question

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

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 .

祝你好运