'How to add icon button to each row of html table?

I have a table in html (using vue.js framework). I want to put a delete button to each row and will make the button as a icon. My code is:

<div>
                <table class="table table-bordered">
                  <thead>
                  <tr>
                    <th>Task Title</th>
                    <th>Priority</th>
                  </tr>
                  </thead>
                  <tr v-for="task in taskList" v-bind:key="task">
                    <td>{{task.priority}}</td>
                    <td>{{task.title}}</td>
                    <button>Delete</button>
                  </tr>
                </table>
              </div>

Table has 3 column; priority, title and the last column will be the icon in "src/assets/logo.png" which goes to the method deleteTask() method onClick().

How can I add the icon button to the table ? (Ignore passing parameter to onclick method etc. I just wonder how to embed image there as button)

javascripthtmlvue.jshtml-tablecoinbase-api


Solution 1:[1]

I'm not quite sure I understood the question but to put an image on a button you just have to do it :

<button>
  <img src="myroot" alt="myalt">
</button>

or in css :

background: url('myurl');
width: px;
heigth: px;

Solution 2:[2]

In css:

:not(thead) tr:hover {
    background: url("images/compatible_chrome.png") no-repeat;
}

or by jquery:

<td><i></i></td>

    <script>
        $(document).ready(function () {
          $("tbody tr").hover(function () {
            $(this).find("i").toggleClass("fa fa-fax");
          });
        });
    </script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ag-dev
Solution 2

Related Questions