ブートストラップのモーダルですべてのテキストフィールド(tr)を編集できますか?私が作ることができる新しい分野も含めて。友人の中には、この場合に使用できると私に言ったが、以前はこのフレームワークを使っていませんでした。私はいくつかの研究を行い、ここやインターネット上に掲載されたいくつかのコードを試しましたが、うまくいきませんでした。これが困難ではない場合、あなたは私がそれを感謝します私を助けることができます。私は自己学習のためのミニプロジェクトを作りようとしています。明らかに、学校で大きなプロジェクトから始まった後です。この場合、ブートストラップは使用できますか?
コード: 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++;
}
})
});
に、ここでより多くの例を参照してくださいに挿入した後、モーダルID
はまた、ライブラリ自体を含めることを忘れないことです何がうまくいかなかったのですか?コンソールにエラーがありますか?あなたがチェックしていないなら、それはあなたの最初の場所でなければなりません。次に、ブレークポイントの設定と変数の検査によってデバッグについて学ぶ必要があります。 – scrappedcola
[this one](http://formvalidation.io/examples/loading-saving-data-modal/)のような例は私のために働いていません。そしてそれは大きなことです、私はちょっとノブ@フレームワークを使用しています。 – xblade52
しかし、 "うまくいかない"という意味を定義する必要があります。モーダルが表示されているか、サブミットイベントが発生しているか、追加する要素を選択する際に問題がありますか、適切な要素を選択していますが、何も追加していないか、実行時に何かを妨げるランタイムエラーはありますか?これらは、質問を投稿する前に行う必要のある基本的なデバッグ手順です。あなたの仕事を誰かに押しつけて、「私は奴だ、それを修正しない」と言っても、あなたがより良い開発者になるのを助けるわけではない。あなたが適切な質問をするなら、私はあなたの経験レベルを気にする必要はありません。 – scrappedcola