Javascript-форум - Работа с массивами и таблицей.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Работа с массивами и таблицей. (https://javascript.ru/forum/dom-window/74619-rabota-s-massivami-i-tablicejj.html)

Работа с массивами и таблицей.

Есть такая таблица.

<!doctype html>
<html lang="ru">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="script.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<title>Kost Artem</title>
</head>
<body>
	<button type="button" class="btn btn-primary" onclick="window.location='add.html'">Add new book</button>
	<table class="table table-bordered table-striped">
		<thead>
			<tr>				
				<th scope="col"><span>&#9660;</span>Title</th>
				<th scope="col"><span>&#9660;</span>Description</th>
				<th scope="col"><span>&#9660;</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>



	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>

И такая форма которая должна добавлять элементы в таблицу.

<!doctype html>
<html lang="ru">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <title>Add page</title>
</head>
<body>

  <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>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>

И желательно все это сделать через массив.

Кто-то знает как єто сделать без серверной части?

Byrylka,
идеи должны быть у вас, пишите код или поищите на форуме, с десяток вариантов наверняка есть.

Цитата:

Сообщение от рони (Сообщение 490873)

Byrylka,
идеи должны быть у вас, пишите код или поищите на форуме, с десяток вариантов наверняка есть.

рони,
Я сегодня искал целый день и никак не могу найти то что нужно. Что я сумел понять что такое можно реализовать через PHP и MYSQL. Но мне єтого не нужно. Подскажите пожалуйста. А то под конец дня я уже отчаялся

Цитата:

Сообщение от рони (Сообщение 490876)

https://javascript.ru/forum/jquery/6...tml#post438374

Єто близко к тому что нужно. Но мне нужно чтобы при нажатии "Добавить елемент" в уже существующей таблице появлялся дополнительный ряд с введенными данными ?

добавление строк в таблицу

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>

Цитата:

Сообщение от рони (Сообщение 490878)

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 = ""
        })
    }
});
  </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>

Спасибо большое... Мне сложно разобраться в коде.. Как еще сделать так чтобы третья колонка с кнопками также каждый раз добавлялась?
Спасибо!

Цитата:

Сообщение от Byrylka

Как еще сделать так чтобы третья колонка с кнопками также каждый раз добавлялась?

добавлена строка 23 пост №6, и не копируйте сообщения целиком.

Смотрите. В строке 46-47 есть две кнопки (пост 6). И это они должны добавляться каждый раз, а не просто слово "Edit"
Спасибо

Цитата:

Сообщение от Byrylka

И это они должны добавляться каждый раз, а не просто слово "Edit"

в чём проблема?
написать в кавычках то что вам нужно?
строка 24 смотрите снова пост №6

Действительно работает.
Кнопка 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);
}

Byrylka,
id уникально, поэтому пример будет через класс и делегирование ... ждите.

удаление строки таблицы

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>

Для красоты лучше между тегами кнопок Edit и Delete в строке 24 вставить пробел

редактирование строк таблицы

Цитата:

Сообщение от 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>

Рони,
ОГРОМНОЕ СПАСИБО!!