我可以使用 Bootstrap 的模式编辑所有文本字段 (tr) 吗？包括我可以创建的新字段。一些 friend 告诉我在这种情况下是可用的，但我以前没有使用过这个框架。我做了一些研究，并尝试了此处和互联网上发布的一些代码，但没有奏效。如果这不难做到并且你们可以帮助我，我将不胜感激。我正在尝试制作用于自学的小型项目，显然是在从学校的大型项目开始之后。
代码: HTML
<!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>
JS:
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++;
}
})
});
最佳答案
<!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>
关于javascript - 在这种情况下可以使用 Bootstrap 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40086774/