Javascript 在这种情况下，引导是否可用？
我可以用引导模式编辑所有文本字段（tr）吗？包括我可以创建的新字段。一些朋友告诉我这个框架在这种情况下是可用的，但我以前没有使用过这个框架。我做了一些研究，并尝试了一些张贴在这里和互联网上的代码，但没有奏效。如果这不难做到，你们可以帮助我，我会很感激的。我试图做一些小型的自学项目，显然是在学校里开始做大型项目之后 代码： HTMLJavascript 在这种情况下，引导是否可用？,javascript,html,twitter-bootstrap,Javascript,Html,Twitter Bootstrap,我可以用引导模式编辑所有文本字段（tr）吗？包括我可以创建的新字段。一些朋友告诉我这个框架在这种情况下是可用的，但我以前没有使用过这个框架。我做了一些研究，并尝试了一些张贴在这里和互联网上的代码，但没有奏效。如果这不难做到，你们可以帮助我，我会很感激的。我试图做一些小型的自学项目，显然是在学校里开始做大型项目之后 代码： HTML <!DOCTYPE html> <html> <head> <title>Main Page</titl
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/script1.js"></script>
</head>
<body>
<table id="mainTable" name="mainTable" align="center" border="0" width="auto">
<tbody>
<tr>
<td align="center">
<input type="number" id="regsAmount" name="regsAmount" style="width:40px; text-align: center;">
<input type="button" id="submitAmount" name="submitAmount" style="width:auto;" value="Add">
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Last Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">ID</th>
<th style="text-align:center; border-style:solid; width:250px; border-width:2px;">Mail</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Username</th>
</td>
</tr>
<tr align="center">
<td>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><button type="button" data-id="1" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><button type="button" data-id="2" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td><button type="button" data-id="3" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td><button type="button" data-id="4" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td><button type="button" data-id="5" class="btn btn-default editButton">Edit</button></td>
</tr>
</tbody>
</table>
<p align="center"><input type="button" id="saveRegs" name="saveRegs" value="Save All" style="width:auto;" onclick="disable_inp()"></p>
</body>
</html>
主页
名称
姓
身份证件
邮寄
用户名
1.
2.
3.
4.
5.
编辑
6.
7.
8.
9
10
编辑
11
12
13
14
15
编辑
16
17
18
19
20
编辑
21
22
23
24
25
编辑
function disable_inp()
{
$("tr:gt(0) td:has(input)").text(function()
{
return $('input', this).val();
});
}
$(document).ready(function()
{
$(document).on('click', "#submitAmount", function()
{
var ValReg = $("#regsAmount").val();
var i = 1;
var array = new Array(5)
array = ["<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>"];
while (i <= ValReg)
{
$("#mainTable").last().append("<tr></tr>");
$("tr").last().append('<td> </td>' + '<td align="center">' + array[0] + '</td>' + '<td align="center">' + array[1] + '</td>' + '<td align="center">' + array[2] + '</td>' + '<td align="center">' + array[3] + '</td>' + '<td align="center">' + array[4] + '</td>');
i++;
}
})
});
功能禁用_inp（）
{
$（“tr:gt（0）td:has（input）”）.text（function（）
{
返回$（'input'，this.val（）；
});
}
$（文档）.ready（函数（）
{
$（文档）。在（'click'，“#submitAmount”，函数（）上
{
var ValReg=$（“#regsAmount”）.val（）；
var i=1；
变量数组=新数组（5）
数组=[“”，“”，“”，“”，“”，“”]；
而（i要显示模式，您需要将数据添加到按钮中，以显示“模式”数据目标=“#myModal”
#myModal
是模式ID
<td><button type="button" data-id="1" class="btn btn-default editButton" data-toggle="modal" data-target="#myModal">Edit</button></td>
<div id="myModal" class="modal fade" role="dialog">
<!-- your modal content -->
</div>
编辑
另外，不要忘记在插入jQuery之后包含库本身
<script src="js/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
有关更多示例，请参见
引导示例
函数禁用_inp（）
{
$（“tr:gt（0）td:has（input）”）.text（function（）
{
返回$（'input'，this.val（）；
});
}
$（文档）.ready（函数（）
{
$（文档）。在（'click'，“#submitAmount”，函数（）上
{
var ValReg=$（“#regsAmount”）.val（）；
var i=1；
变量数组=新数组（5）
数组=[“”，“”，“”，“”，“”，“”]；
while（我）什么不起作用？你在控制台中有错误吗？如果你没有检查，那应该是你第一个开始的地方。然后你需要通过设置断点和检查变量来学习调试。像这样的例子对我不起作用。这是一件大事，我有点像noob@frameworks。但是你需要定义什么“不行"表示。模式是否显示，是否发生提交事件，是否在选择要附加的元素时遇到问题，是否选择了正确的元素但没有附加任何内容，是否存在运行时错误导致任何内容无法运行？这些是在发布问题之前需要执行的基本调试步骤。放弃您的工作对某人说“我是个傻瓜，这不管用，修好它”这并不能帮助你成为一名更好的开发人员。如果你提出一个合适的问题，我就不在乎你的经验水平。对不起，模态没有显示，这就是问题所在。@xblade52我已经通过单击“编辑”按钮更新了我的答案，它显示了模型。哦，它起了作用。数据没有以表格形式加载，但你帮了大忙，谢谢。我们也可以这样做@xblade52 I将更新我的答案。并将修改过程写入tr？如果你这样做，那将非常棒。我将尝试进入一门课程，因为这个框架很有趣。嘿@xblade52请检查我是否更新了我的答案？现在尝试一下，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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 src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
<script>
function disable_inp()
{
$("tr:gt(0) td:has(input)").text(function()
{
return $('input', this).val();
});
}
$(document).ready(function()
{
$(document).on('click', "#submitAmount", function()
{
var ValReg = $("#regsAmount").val();
var i = 1;
var array = new Array(5)
array = ["<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>"];
while (i <= ValReg)
{
$("#mainTable").last().append("<tr></tr>");
$("tr").last().append('<td> </td>' + '<td align="center">' + array[0] + '</td>' + '<td align="center">' + array[1] + '</td>' + '<td align="center">' + array[2] + '</td>' + '<td align="center">' + array[3] + '</td>' + '<td align="center">' + array[4] + '</td>');
i++;
}live
})
$('.editButton').on('click', function() {
// Get the record's ID via attribute
var id = $(this).attr('data-id');
// Populate the form fields with the data returned from server
// Show the dialog
bootbox
.dialog({
title: 'Edit the user profile',
message: $('#userForm'),
show: false // We will show it manually later
})
.on('shown.bs.modal', function() {
$('#userForm')
.show() // Show the login form
})
.on('hide.bs.modal', function(e) {
// Bootbox will remove the modal (including the body which contains the login form)
// after hiding the modal
// Therefor, we need to backup the form
$('#userForm').hide().appendTo('body');
})
.modal('show');
});
$('table tbody tr td').on('click',function(){
$("#name").val($(this).closest('tr').children()[1].textContent);
$("#lastname").val($(this).closest('tr').children()[2].textContent);
$("#id").val($(this).closest('tr').children()[3].textContent);
$("#mail").val($(this).closest('tr').children()[4].textContent);
$("#username").val($(this).closest('tr').children()[5].textContent);
});
});
</script>
</head>
<body>
<table id="mainTable" name="mainTable" align="center" border="0" width="auto">
<tbody>
<tr>
<td align="center">
<input type="number" id="regsAmount" name="regsAmount" style="width:40px; text-align: center;">
<input type="button" id="submitAmount" name="submitAmount" style="width:auto;" value="Add">
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Last Name</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">ID</th>
<th style="text-align:center; border-style:solid; width:250px; border-width:2px;">Mail</th>
<th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Username</th>
</td>
</tr>
<tr align="center">
<td>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><button type="button" data-id="1" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><button type="button" data-id="2" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td><button type="button" data-id="3" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td><button type="button" data-id="4" class="btn btn-default editButton">Edit</button></td>
</tr>
<tr align="center">
<td></td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td><button type="button" data-id="5" class="btn btn-default editButton">Edit</button></td>
</tr>
</tbody>
</table>
<p align="center"><input type="button" id="saveRegs" name="saveRegs" value="Save All" style="width:auto;" onclick="disable_inp()"></p>
<form id="userForm" method="post" class="form-horizontal" style="display: none;">
<div class="form-group">
<label class="col-xs-3 control-label">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" id='name' name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Last name</label>
<div class="col-xs-5">
<input type="text" id='lastname' class="form-control" name="lastname" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">id</label>
<div class="col-xs-5">
<input type="text" class="form-control" id='id' name="id" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Mail</label>
<div class="col-xs-5">
<input type="text" class="form-control" id='mail' name="mail" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">username</label>
<div class="col-xs-5">
<input type="text" id='username' class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
</form>
</body>
</html>