Показать сообщение отдельно
  #6 (permalink)  
Старый 24.07.2018, 22:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

добавление строк в таблицу
Byrylka,
ввести Title и Description, нажать Save
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("form").on("click", "[type='button']", add);

    function add() {
        var tr = $("<tr>").appendTo("tbody");
        $(".form-control").each(function() {
            $("<td>", {
                html: this.value
            }).appendTo(tr);
            this.value = ""
        });
      $("<td>", {
                html: '<button type="button" id="edit">Edit</button><button type="button" id="delete">Delete</button>'
            }).appendTo(tr);

    }
});
  </script>
</head>

<body>
<table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th scope="col"><span>▼</span>Title</th>
                <th scope="col"><span>▼</span>Description</th>
                <th scope="col"><span>▼</span>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="td1">Cell 1</td>
                <td>Cell 2</td>
                <td style="text-align: center">
                    <button type="button" id="edit">Edit</button>
                    <button type="button" id="delete">Delete</button>
                </td>
            </tr>
            <tr>
                <td>Cell 4</td>
                <td>Cell 5</td>
                <td></td>
            </tr>
            <tr>
                <td>Cell 7</td>
                <td>Cell 8</td>
                <td></td>
            </tr>
            <tr>
                <td>Cell 10</td>
                <td>Cell 11</td>
                <td></td>
            </tr>
        </tbody>
    </table>
<form>
   <div class="form-group">
    <label for="formGroupExampleInput">Title</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Title" required oninvalid="this.setCustomValidity('Це поле повинно бути заповнене!')" oninput="setCustomValidity('')">
  </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Description</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description"></textarea>
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Active?</label>
    </div>
    <button type="button" class="btn btn-light" >Save</button>
    <button type="submit" class="btn btn-light" onclick="window.location='index.html'">Back</button>
  </form>
</body>
</html>

Последний раз редактировалось рони, 25.07.2018 в 11:16.
Ответить с цитированием