xblade52 xblade52 - 1 month ago 8
HTML Question

Is Bootstrap usable in this case?

Can I edit all text fields (tr's) with Bootstrap's modal? including the new fields that I can create. Some friend told me that is usable in this case, but I haven't worked with this framework before. I've made some research, and tried some codes posted here and on the internet, but haven't worked. If this is not difficult to do and you guys can help me I'll appreciate it. I'm trying to make mini projects for self learning, and obviously after starting with big ones in school.

Code:
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++;
}
})
});

Answer
<!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);

});

});

</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>

    enter code here