Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.07.2018, 11:26
Новичок на форуме
Отправить личное сообщение для Byrylka Посмотреть профиль Найти все сообщения от Byrylka
 
Регистрация: 24.07.2018
Сообщений: 8

Действительно работает.
Кнопка Delete удаляет строку. Но скрипт не работает на уже новых кнопках которые добавляются. Как усправить? я знаю что уже надоел Вам, но подскажите
function remove(){
  this.closest('tr').style.display = "none";
}
var elems = document.getElementsByTagName('button');

for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener("click", remove, true);
}
Ответить с цитированием
  #12 (permalink)  
Старый 25.07.2018, 11:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Byrylka,
id уникально, поэтому пример будет через класс и делегирование ... ждите.
Ответить с цитированием
  #13 (permalink)  
Старый 25.07.2018, 11:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

удаление строки таблицы
Byrylka,
удаление для кнопок с классом delete строка 29 и 31
классы добавлены в строки 24 и 55
<!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" class="edit">Edit</button><button type="button" class="delete">Delete</button>'
            }).appendTo(tr);

    }

    $("table").on("click", ".delete", del);

    function del()
    {
       $(this).parents("tr").remove()
    }

});
  </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" class="edit">Edit</button>
                    <button type="button" class="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:42.
Ответить с цитированием
  #14 (permalink)  
Старый 25.07.2018, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Byrylka,
редактирование
https://javascript.ru/forum/misc/455...tml#post302151
https://javascript.ru/forum/dom-wind...tml#post488833
Ответить с цитированием
  #15 (permalink)  
Старый 25.07.2018, 11:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Для красоты лучше между тегами кнопок Edit и Delete в строке 24 вставить пробел
Ответить с цитированием
  #16 (permalink)  
Старый 25.07.2018, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

редактирование строк таблицы
Сообщение от Dilettante_Pro
Для красоты
добавлено
Byrylka,
добавлено редактирование строк, через туже форму для добавления.
<!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 = trEdit ? trEdit.empty() : $("<tr>").appendTo("tbody");
        trEdit = null;
        $(".form-control").each(function() {
            $("<td>", {
                html: this.value
            }).appendTo(tr);
            this.value = ""
        });
        $("<td>", {
            html: '<button type="button" class="edit">Edit</button>&nbsp;<button type="button" class="delete">Delete</button>'
        }).appendTo(tr)
    }
    $("table").on("click", ".delete", del);

    function del() {
        $(this).parents("tr").remove()
    }
    $("table").on("click", ".edit", editor);
    var trEdit;

    function editor() {
        trEdit = $(this).parents("tr");
        trEdit.find("td:lt(2)").each(function(i) {
            $(".form-control").eq(i).val(this.textContent)
        })
    }
});
  </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" class="edit">Edit</button>
                    <button type="button" class="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>
Ответить с цитированием
  #17 (permalink)  
Старый 25.07.2018, 12:27
Новичок на форуме
Отправить личное сообщение для Byrylka Посмотреть профиль Найти все сообщения от Byrylka
 
Регистрация: 24.07.2018
Сообщений: 8

Рони,
ОГРОМНОЕ СПАСИБО!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа с массивами Gerd199 Общие вопросы Javascript 41 05.04.2018 23:36
работа с массивами jony0x Элементы интерфейса 5 31.10.2016 22:17
Работа с массивами BorisBritva jQuery 6 23.02.2014 18:31
работа с массивами one-two Работа 11 31.01.2011 16:30
Все тот же innerHTML и IE (работа с динамической таблицей HTML5) abstract Internet Explorer 7 16.12.2010 18:19