Question

我有几个表行，每个表都附加了数据属性。当我点击每个表格行时我想打开模态，如何获取数据属性，td值并在tr上点击模式特定字段id

表的

<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;
});

还可以更改＆＃39; show＆＃39;这件事。

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

祝你好运

获取数据属性并在bootstrap模式中显示

1 个答案: