Question

我可以使用Bootstrap的模态编辑所有文本字段（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++;
      }
})
});

Answer 1

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

Answer 2

要显示模态，您需要将data-toogle='modal' data-target="#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>

在w3schools

上查看更多示例

Bootstrap在这种情况下是否可用？

2 个答案: