Действительно работает.
Кнопка 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 вставить пробел
|
редактирование строк таблицы
Цитата:
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> <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>
|
Рони,
ОГРОМНОЕ СПАСИБО!! |
| Часовой пояс GMT +3, время: 05:42. |