JQuery - Добавлять новые записи, Удалять уже существующие записи, Редактировать существующие записи [закрыт]

220

30 мая 2018, 19:40

С помощью JQuery создать список или таблицу со следующими функциями:

Добавлять новые записи в список или таблицы
Удалять уже существующие записи
Редактировать существующие записи

Answer 1

Как динамически добавлять или удалять строки внутри таблицы с помощью jQuery?

Используйте метод jQuery .append() или .remove()

Вы можете использовать метод jQuery .append() для добавления или добавления строк внутри таблицы HTML. Аналогичным образом вы можете использовать метод .remove() для удаления или удаления строк таблицы, а также всего, что внутри него из DOM динамически с помощью jQuery. Посмотрите следующий пример.

Вот код который это делает:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Add / Remove Table Rows</title> 
<style type="text/css"> 
table{ 
    width: 100%; 
    margin: 20px 0; 
    border-collapse: collapse; 
} 
table, th, td{ 
    border: 1px solid #cdcdcd; 
} 
table th, table td{ 
    padding: 5px; 
    text-align: left; 
} 
</style> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".add-row").click(function(){ 
        var name = $("#name").val(); 
        var email = $("#email").val(); 
        var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>"; 
        $("table tbody").append(markup); 
    }); 
     
    // Find and remove selected table rows 
    $(".delete-row").click(function(){ 
        $("table tbody").find('input[name="record"]').each(function(){ 
            if($(this).is(":checked")){ 
                $(this).parents("tr").remove(); 
            } 
        }); 
    }); 
});     
</script> 
</head> 
<body> 
<form> 
    <input type="text" id="name" placeholder="Name"> 
    <input type="text" id="email" placeholder="Email Address"> 
    <input type="button" class="add-row" value="Add Row"> 
</form> 
<table> 
    <thead> 
        <tr> 
            <th>Select</th> 
            <th>Name</th> 
            <th>Email</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td><input type="checkbox" name="record"></td> 
            <td>Peter Parker</td> 
            <td>peterparker@mail.com</td> 
        </tr> 
    </tbody> 
</table> 
<button type="button" class="delete-row">Delete Row</button> 
</body>  
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

Есть данная конструкция, она позволяет анимировать счетчик от нуля до указанного в настройках скрипта значения

221

jQuery

Не срабатывает повторно функция .click

При первом нажатии наopen, функция отрабатывает нормально, заменяю класс

234

jQuery

KendoComboBox устанавиливается в display none

Используется тег kendoComboBoxПочему-то при вызове метода kendoComboBox() свойство display устанавливается в none

202

Unity(C#) - Как проверить, является ли объект землёй?

Есть объект "Player", и есть объекты земли, которые имеют скрипт "grass"Как осуществить проверку, соприкосается ли объект "Player" с землёй в данный...

187