Блог

По сути, я пытаюсь заменить следующие кнопки РЕДАКТИРОВАНИЯ и УДАЛЕНИЯ значками, но сталкиваюсь с проблемами, пытаясь сделать это в HTML. Функция OnClick, похоже, ничего не делает, когда я нажимаю кнопки. Есть идеи о том, как настроить этот код?

HTML

 <div style="height:400px; overflow:auto; margin:0px 20px 20px 20px">
    <table id="userTable" class="table table-striped" style="font-family: graphik">
        <tr>
            <th>Employee</th>
            <th>Description</th>
            <th colspan="3">Stakeholder Group</th>
        </tr>
        {% for user in users %}
        <tr id="user-{{user.id}}">
            <td class="useremployee userData" name="employee">{{user.employee}}</td>
            <td class="userdescription userData" name="description">{{user.description}}</td>
            <td class="userstakeholder_group userData" name="stakeholder_group">{{user.stakeholder_group}}</td>
            <td align="center">
                <button class="btn btn-success form-control" onClick="editUser({{user.id}})" data-toggle="modal" data-target="#myModal" )">EDIT</button>
            </td>
            <td align="center">
                <img class="d-block w-100" src="{% static 'polls/images/edit.png' %}" style="cursor:pointer; width: 30px; height: 30px" alt="opmodel">
            </td>
            <td align="center">
                <img class="d-block w-100" onClick="editUser({{user.id}})" src="{% static 'polls/images/delete.png' %}" style="cursor: pointer; width: 30px; height: 30px" alt="opmodel">
            </td>
            <td align="center">
                <button class="btn btn-danger form-control" onClick="deleteUser({{user.id}})">DELETE</button>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
 

Я думаю, что помещение изображения внутри тега ссылки должно сработать

 <td align="center">
    <a href="editUser({{user.id}})">
        <img class="d-block w-100" src="{% static 'polls/images/edit.png' %}" style="cursor:pointer; width: 30px; height: 30px" alt="opmodel">
    </a>
</td>
 

Я думаю, вы можете сделать так.

 <button class="mybutton" onClick="editUser({{user.id}})"><img class="d-block w-100" src="{% static 'polls/images/edit.png' %}" style="cursor:pointer; width: 30px; height: 30px" alt="opmodel"></button>
 

css

 .mybutton {
    border: none;
    background-color: #fff;
    outline: none;
}

.mybutton:hover {
    border: none;
    outline: none;
    cursor: pointer;
}