Twitter引导：如何显示文本框中的弹出窗口

Question

我设计了一个带有按钮的输入文本框。一旦我点击该按钮就会显示一个弹出窗口。包含带有值的表格。现在，我选择了一个值，但没有显示在文本框中。

如何获得价值？请引导我。

<div> 
<label for="name" style="margin: 0px;">EMP NAME</label> 
<input type="text" class="input-normal" id="empname" href="#fee-details" data-toggle="modal" style="line-height: initial; margin-left: 6px;"> 
</div> 

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-body"> 
     <table class="table table-condensed"> 
      <thead class="modal-header login-modal-header"> 
       <tr style="width:100%;"> 
        <th style="width:50%;">Header1</th> 
        <th style="width:50%;">Header2</th> 
       </tr> 
      </thead> 
      <tbody class="body"> 
       <tr> 
        <td>1</th> 
        <td class='val'>A</th> 
       </tr> 
       <tr> 
        <td>2</th> 
        <td class='val'>B</th> 
       </tr> 
       <tr> 
        <td>3</th> 
        <td class='val'>C</th> 
       </tr> 
       <tr> 
        <td>4</th> 
        <td class='val'>D</th> 
       </tr> 
       <tr> 
        <td>5</th> 
        <td class='val'>E</th> 
       </tr> 
       <tr> 
        <td>6</th> 
        <td class='val'>F</th> 
       </tr> 
      </tbody> 
     </table>   
    </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

脚本：

$('.body').on('click',function(){ 
$('#empname').val($(this).find('.val').html()); 
$('#fee-details').modal('toggle'); 
}); 

Answer 1

您可以在表中 “回” 到<input>这种方式传递一个点击值：

$("#values tbody td").on('click', function() { 
    $("#empname").val($(this).text()); 
    $("#fee-details").modal('hide'); 
}) 

你的代码在一个小提琴 - >http://jsfiddle.net/mwfbs3bk/

NB：Hav E中给出的表中的id为了方便

---

更新具有小预输入的例子。原始bootstrap 2.x易于使用的typeahead从bootstrap 3.x中删除。幸运的是，它很容易重新实现。它只是提取旧资源并将其包含在项目中。这已经为你做 - >https://github.com/bassjobsen/Bootstrap-3-Typeahead

简单地包括脚本

<script src="https://rawgithub.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script> 

您#empname<input>到预输入这种方式转换：

$("#empname").typeahead({ source: ['London', 'Copenhagen', 'Antwerpen', 'Stockholm', 'Berlin'] }); 

更新小提琴从上面 - >http://jsfiddle.net/mwfbs3bk/2/

Answer 2

你可以在jQuery中做这样的事情。测试了代码，工作正常。

$(document).ready(function() { 
 
     $('.tableBody tr').on('click', function() { 
 

 
     $('#empname').val($(this).find('.val').html()); 
 
     $('#fee-details').modal('toggle'); 
 
     }); 
 
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div> 
 
    <label for="name" style="margin: 0px;">EMP NAME</label> 
 
    <input type="text" class="input-normal" id="empname" style="line-height: initial; margin-left: 6px;"> 
 
    <button type="button" id="name_value" class="btn btn-primary btn-xs" href="#fee-details" data-toggle="modal">Select Value</button> 
 
</div> 
 

 
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <table class="table table-condensed"> 
 
      <thead class="modal-header login-modal-header"> 
 
      <tr style="width:100%;"> 
 
       <th style="width:50%;">Header1</th> 
 
       <th style="width:50%;">Header2</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody class="tableBody"> 
 
      <tr> 
 
       <td>1</th> 
 
       <td class="val">A</th> 
 
      </tr> 
 
      <tr> 
 
       <td>2</th> 
 
       <td class="val">B</th> 
 
      </tr> 
 
      <tr> 
 
       <td>3</th> 
 
       <td class="val">C</th> 
 
      </tr> 
 
      <tr> 
 
       <td>4</th> 
 
       <td class="val">D</th> 
 
      </tr> 
 
      <tr> 
 
       <td>5</th> 
 
       <td class="val">E</th> 
 
      </tr> 
 
      <tr> 
 
       <td>6</th> 
 
       <td class="val">F</th> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog -->

Answer 3

这里只需要编写的jQuery的几行，这将有助于你做出

$('tbody td').on('click',function(){ 
 
    var selectedVal = $(this).text().trim(); 
 
    $('#empname').val(selectedVal); 
 
    $("#fee-details").modal('hide'); 
 
})

这里是演示代码这

Demo

With Fixed Header table