1

http://jsfiddle.net/569rmxff/

var users = [];

$(document).ready(function()
{
    $("#editBox input[type=button]").on("click",function()
    {
        var userName = $("#editBox input[name=userName]").val();
        var userRole = $("#editBox select[name=userRole]").val();

        if(userName)
        {
            var newUserLine = $("<tr><td>" + userName + "</td><td>" + userRole+ " </td></tr>");
            users.push({name:userName, role:userRole});
            $("#tableUsers tr").last().after(newUserLine);
        }


        });
});
#editBox
{
    /*border:1px solid gray;*/
    margin-bottom: 30px;
}
#editBox input[type=button]
{
    margin-top: 10px;
    display: block;
}
#editBox
{

}
#tableUsers
{
    border-collapse: collapse;
}
#tableUsers td
{
    border: 1px solid gray;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="editBox">
    <input name="userName" type="text" placeholder="Имя пользователя">

    <select name="userRole">
        <option value="Админ">Админ</option>
        <option value="Менеджер">Менеджер</option>
        <option value="Гость">Гость</option>
    </select>
    <input type="button" value="Добавить">

        <div id="table">

    <table id="tableUsers">
        <tr>
            <td>
                Имя Пользователя

            </td>

            <td>
                Правва доступа
            </td>
            <td>
            </td>
        </tr>

    </table>
</div>

Есть код, на компе все прекрасно работает, добавляет пользователя, а в jsfiddle - нет. Короче, нужно добавить кнопку удаления рядом с записью, чтобы удаляла именно эту запись, рядом с которой стоит.

1
  • @Серёжа Сухинин, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 2 мар 2015 в 18:38

2 ответа 2

2

Например так.

Первое важное изменение: добавим кнопку в таблицу:

<tr><td><button role=delete>del</button></td><td>" + userName + "</td><td>" + userRole+ " </td></tr>

Второе важное изменение: создадим обработчик клика на эту кнопку:

$("#tableUsers").on('click', 'button[role="delete"]', function(){
    $(this).closest('tr').remove();
});

И рекомендую для общего развития почитать про шаблонизаторы.

1

в jsfiddle нужно просто слева подключить jQuery http://jsfiddle.net/569rmxff/2/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.