Я использую платформу bootstrap4 для своего веб-приложения. Вот мое требование: у меня есть таблица, созданная с некоторыми значениями, и в каждой строке есть кнопка редактирования в конце строки (последний столбец). при нажатии кнопки редактирования должна появиться форма с существующими данными в строке. Таким образом, пользователь может изменить только те поля, для которых было произведено возвращение. Я знаю, что это нужно делать с помощью javascript для заполнения текстовых полей в текущей форме. Но с фреймворком bootstrap4 я не знаю, как это сделать. Это мой стол

        <div class="table-responsive">
          <table class="table table-hover table-dark">
      <thead>
        <tr>
          <th scope="col">Channel No</th>
          <th scope="col">Channel Name</th>
          <th scope="col">Descrption</th>
          <th scope="col">Recording Status</th>
          <th scope="col">Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>TV 1</td>
          <td>Otto</td>
           <td>Y</td>
      <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
  Edit
</button></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>TV 2</td>
          <td>Thornton</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">TV 3</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td colspan="2">Derana</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td colspan="2">TV 5</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">6</th>
          <td colspan="2">TV 6</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
        <tr>
          <th scope="row">7</th>
          <td colspan="2">TV 7</td>
           <td>Y</td>
          <td><button type="button" class="btn btn-info">Edit</button>
          </td>
        </tr>
      </tbody>
    </table> 

Это кнопка редактирования

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
  Edit
</button>

Это моя форма POP (модальная) для кнопки редактирования

<div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
           
            <div class="modal-body">
                <form role="form" method="POST" action="">
                    <input type="hidden" name="_token" value="">
                    <div class="form-group">
                        <label class="control-label">Channel No</label>
                        <div>
                            <input type="number" class="form-control input-lg" name="channelid" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Channel Name</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="channel">
                        </div>
                    </div>
                      <div class="form-group">
                        <label class="control-label">Description</label>
                        <div>
                            <input type="text" class="form-control input-lg" name="description">
                        </div>
                    </div>
                     <div class="form-group">
                        
                      <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember"> Channel Recordable
                                </label>
                            </div>
                    </div>
                    
                    <div class="form-group">
                        <div>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <button type="submit" class="btn btn-success">Update</button>
 
                        
                        </div>
                    </div>
                </form>
              
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  
0
nskniranga1127 14 Сен 2020 в 13:19

2 ответа

Лучший ответ
$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
    var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button

    $('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});

Это короткий способ собрать один внутренний HTML-код из вашего внутреннего ряда вашей кнопки. Просто чтобы показать, как это работает. В любом случае вам следует перейти на w3c или другую страницу с основами и изучить основы js / jquery. Этот код, который я написал, находится в jquery, так как у вас есть bootstrap.

1
Every Screamer 14 Сен 2020 в 12:08

Вот полностью рабочий code и более динамичный подход к тому, что вы хотите. Вы можете использовать встроенную функцию jQuery boostrap для show модального окна при нажатии кнопки edit в строке.

Вы можете watch какую кнопку triggered использовать в модальном окне, и из них вы можете получить все данные с помощью функции jQuery, например closest () и find ()

Когда у вас есть данные соответствующей строки, вы можете применить их к входу form, который находится в modal

Кроме того, у меня также есть функция, при которой статус записи - Y, тогда флажок в модальном окне будет автоматически установлен, и если его N, он будет снят.

Демонстрационная версия Live Working .

$("#ModalLoginForm").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal

  //get data
  var cId = button.closest('tr').find('th').text() //1st th
  var cName = button.closest('tr').find('th').next().text() //2nd th
  var cDesc = button.closest('tr').find('th').next().next().text() //3 th
  var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th

  //Apply data
  $('[name="channelid"]').val(cId);
  $('[name="channel"]').val(cName);
  $('[name="description"]').val(cDesc);
  //check the checkbox
  if (isRecord == 'Y') {
    $('[name="remember"]').prop('checked', true); //check the checbox
  } else {
    $('[name="remember"]').prop('checked', false);
  }
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
  <table class="table table-hover table-dark">
    <thead>
      <tr>
        <th scope="col">Channel No</th>
        <th scope="col">Channel Name</th>
        <th scope="col">Descrption</th>
        <th scope="col">Recording Status</th>
        <th scope="col">Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>TV 1</td>
        <td>Otto</td>
        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>TV 2</td>
        <td>Thornton</td>
        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>


      <tr>
        <th scope="row">3</th>
        <td>TV 3</td>
        <td>dfdf</td>
        <td>N</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>TV 4</td>
        <td>dfdf</td>

        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>TV 5</td>
        <td>dfdf</td>

        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>TV 6</td>
        <td>dfdf</td>

        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>TV 7</td>
        <td>dfdf</td>

        <td>Y</td>
        <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
            Edit
          </button></td>
      </tr>
    </tbody>
  </table>
  <div id="ModalLoginForm" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <form role="form" method="POST" action="">
            <input type="hidden" name="_token" value="">
            <div class="form-group">
              <label class="control-label">Channel No</label>
              <div>
                <input type="number" class="form-control input-lg" name="channelid" value="">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">Channel Name</label>
              <div>
                <input type="text" class="form-control input-lg" name="channel">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">Description</label>
              <div>
                <input type="text" class="form-control input-lg" name="description">
              </div>
            </div>
            <div class="form-group">

              <div class="checkbox">
                <label>
                  <input type="checkbox" name="remember"> Channel Recordable
                </label>
              </div>
            </div>

            <div class="form-group">
              <div>

              </div>
            </div>
            <div class="form-group">
              <div>
                <button type="submit" class="btn btn-success">Update</button>


              </div>
            </div>
          </form>

        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
1
AlwaysHelping 14 Сен 2020 в 12:46