{% extends "checkinBase.html" %}
{% block content %}

<table>
    <!-- 改 -->
    {% for manager in managers %}
    <tr>
    <td><input type="text" value="{{manager.name}}" id="{{manager.id}}" mark="{{manager.phone}}" class="form-control"  required="required"  ></td>
    <td><input type="tel" value="{{manager.phone}}" class="form-control" mark="{{manager.phone}}"  required="required" ></td>
    <td><button role="update" type="button" class="btn btn-default" mark="{{manager.phone}}">更新</button></td>
    <td><button role="delete" type="button" class="btn btn-danger" mark="{{manager.phone}}">删除</button></td>
    </tr>
    {% endfor %}
    <!-- 增 -->
    <tr>
    <td><input type="text" name="name" class="form-control"  mark='new' required="required"  ></td>
    <td><input type="tel" name="phone" class="form-control"  mark='new' required="required" ></td>
    <td><button role="insert" type="button" class="btn btn-primary" mark='new'>新增</button></td>
    </tr>
</table>
<p class="warning" id="result"></p>
{% endblock %}

{% block script %}
<script>
$(function(){
    $('[type="button"]').click(function() {
        var data, id, name, phone, queryType;
        // 获取信息
        name = $('[mark="'+$(this).attr('mark')+'"][type="text"]').val();
        phone = $('[mark="'+$(this).attr('mark')+'"][type="tel"]').val();
        queryType = $(this).attr('role'); // 有insert, update, delete
        data = {'name':name, 'phone':phone, 'queryType':queryType};
        if(queryType != 'insert'){
            data['id'] = $('[mark="'+$(this).attr('mark')+'"][type="text"]').attr('id');
        }
        if (!name || !phone){
            $('#result').text('请填写完整信息');
            return false;
        }
        // 传
        $.post(
            '/super',
            data,
            function(res) {
                $('#result').text(res);
                if(queryType != 'update'){window.location.reload();}
            }
        )
    })
})
</script>
{% endblock %}