2016-10-17 4 views
1

ブートストラップのモーダルですべてのテキストフィールド(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++; 
     } 
}) 
}); 
+0

に、ここでより多くの例を参照してくださいに挿入した後、モーダル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> 

はまた、ライブラリ自体を含めることを忘れないことです何がうまくいかなかったのですか?コンソールにエラーがありますか?あなたがチェックしていないなら、それはあなたの最初の場所でなければなりません。次に、ブレークポイントの設定と変数の検査によってデバッグについて学ぶ必要があります。 – scrappedcola

+0

[this one](http://formvalidation.io/examples/loading-saving-data-modal/)のような例は私のために働いていません。そしてそれは大きなことです、私はちょっとノブ@フレームワークを使用しています。 – xblade52

+0

しかし、 "うまくいかない"という意味を定義する必要があります。モーダルが表示されているか、サブミットイベントが発生しているか、追加する要素を選択する際に問題がありますか、適切な要素を選択していますが、何も追加していないか、実行時に何かを妨げるランタイムエラーはありますか?これらは、質問を投稿する前に行う必要のある基本的なデバッグ手順です。あなたの仕事を誰かに押しつけて、「私は奴だ、それを修正しない」と言っても、あなたがより良い開発者になるのを助けるわけではない。あなたが適切な質問をするなら、私はあなたの経験レベルを気にする必要はありません。 – scrappedcola

答えて

2
<!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> 
+0

@ xblade52私は自分の答えを更新しました。編集ボタンをクリックするとモデルが表示されます。 –

+0

ああ、それは働いた。データはフォームに読み込まれませんでしたが、多くのお手伝いをしました。 – xblade52

+0

@ xblade52私は私の答えを更新します。 –

0

あなたがボタンにdata-toogle='modal' data-target="#myModal"を追加する必要がモーダルを表示するには。

#myModalは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> 

w3schools

関連する問題