我已经能够创建一个包含“姓名”、“电子邮件”和“联系电话”字段的表单。当我单击“提交”时，我将在带有“编辑”按钮的表中显示输入的值，现在我想配置 Bootstrap 模式，当前值应显示在 Bootstrap 模式上。一旦我编辑它，然后单击更新，它应该反射(reflect)在表格元素上。请帮忙
$(document).ready(function(){
$("#submitid").on("click",function(){
var Name = $("#name").val();
console.log("Name is "+ Name);
var Email = $("#emailid").val();
console.log("Email is "+Email);
var Contact = $("#contactno").val();
$("#tableid").css("display","block");
var newRow = "<tr><td>"+ Name +"</td> <td>"+ Email + "</td> <td>"+ Contact + "</td> <td>";
$("table tbody").append(newRow + "<p data-placement=" +"top" + "data-toggle="+ "tooltip" + "title="+ " Edit" + "><"+ "button class="+ "btn btn-primary btn-xs" + "data-title=" +"Edit" + "data-toggle=" + "modal" + "data-target=" + "#edit" + "><span class=" +
"glyphicon glyphicon-pencil" + "></span></button></p></td> </tr>");
return false;
});
});<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assgn9_2.js"></script>
</head>
<body>
<div class="container">
<form id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="emailid" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="contact">Contact no:</label>
<input type="number" class="form-control" id="contactno" placeholder="Enter Phone">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default" id="submitid" >Submit</button>
</form>
<table class="table" id ="tableid" style="display : none">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>最佳答案
我开发了一个Jsfiddle为你。但首先只是一些建议。
1 - 最好的方法是在用户提交表单后不转换输入类型，而是使用像 jQueryValidate 这样的库。在提交表单之前验证数据，并在必要时检索(后退)到输入字段以再次重新输入。
2 - 我没有更新该行的值，因为有很多方法可以做到这一点，所以我将在这里放置一个著名的片段，它可以教育您并帮助您选择最适合您目的的内容。
方法1.input事件
在现代浏览器中使用输入事件。当用户在文本字段中输入、粘贴、撤消时，基本上只要值从一个值更改为另一个值，就会触发此事件。
在 jQuery 中这样做
从 jQuery 1.7 开始，将 bind 替换为 on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
方法2.keyup事件
对于较旧的浏览器，请使用 keyup 事件(一旦键盘上的某个键被释放，该事件就会触发，该事件可能会产生某种误报，因为当释放“w”时，输入值会发生更改并且 keyup 事件会触发，而且当释放“shift”键时，也会触发 keyup 事件，但没有对输入进行任何更改。)。此外，如果用户右键单击并从上下文菜单粘贴，则此方法不会触发:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
示例:http://jsfiddle.net/pxfunc/5kpeJ/
现在你的答案:
JS/jQuery
$(document).ready(function(){
$("#submitid").on("click",function(){
var Name = $("#name").val();
console.log("Name is "+ Name);
var Email = $("#emailid").val();
console.log("Email is "+Email);
var Contact = $("#contactno").val();
$("#tableid").css("display","block");
var newRow = "<tr><td>"+"<input type='text' placeholder='"+Name+ "'>"+Name+"</td> <td>"+"<input type='text' placeholder='"+Email + "'>"+Email+"</td> <td>"+"<input type='text' placeholder='"+Contact + "'>"+Contact+"<a href='#' id=''> DELETE</a> </td> <td>";
$("table tbody").append(newRow);
return false;
});
});
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<form id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="emailid" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="contact">Contact no:</label>
<input type="number" class="form-control" id="contactno" placeholder="Enter Phone">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default" id="submitid" >Submit</button>
</form>
<table class="table" id ="tableid" style="display : none">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
关于javascript - 如何更新 Bootstrap 模态中的表单字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40118162/