Display a button in a single row table

Question

Display a button in a single row table

Here is my table markup:

<table class="table table-condensed">
    <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="row in tasks">
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">{{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">{{row.text}}<button v-if="showBatton">Test</button></td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">{{row.date_current}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction"><button v-if="showBatton">Test</button></td>
        </tr>
    </tbody>
</table>

The issue I am facing is that the button appears on all visible lines instead of just the line where the mouse is hovering.

Here is the script section:

data: {
    showBatton: false,
},
showButtonFunction() {
    console.log("test");
    this.showBatton = true;
},
hideButtonFunction() {
    this.showBatton = false;
}

Any ideas on how to rectify this behavior?

javascript vue.js html-table

Answer 1

Answer №1

You have the ability to achieve this using only CSS:

// CSS
tr button {
  display: none;
}

tr:hover button {
  display: inline-block;
}

// HTML
<tr v-for="row in tasks">
  <td span>{{row.id}}</td>
  <td span>{{row.text}}<button>Test</button></td>
  <td span>{{row.date_current}}</td>
  <td span><button>Test</button></td>
</tr>

Answer 2

You have the ability to achieve this using only CSS:

// CSS
tr button {
  display: none;
}

tr:hover button {
  display: inline-block;
}

// HTML
<tr v-for="row in tasks">
  <td span>{{row.id}}</td>
  <td span>{{row.text}}<button>Test</button></td>
  <td span>{{row.date_current}}</td>
  <td span><button>Test</button></td>
</tr>

Answer 3

Answer №2

You have the ability to implement this functionality using VueJS as well, similar to the following example:

<div id="app">
     <table class="table table-condensed">
       <thead>
         <tr>
           <th>id</th>
           <th>task</th>
           <th>date</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="row in tasks"  @mouseover="showButtonFunction(row.id)"  @mouseleave="hideButtonFunction" :key="row.id">
           <td>{{row.id}}</td>
           <td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
           <td>{{row.date_current}}</td>
           <td><button v-show="buttonIndex === row.id">Test</button></td>
         </tr>
       </tbody>
  </table>
</div>

JavaScript Code:

var vue = new Vue({
    el: '#app',
    data:{
     buttonIndex: false,
      tasks: [
        {
          id: 1,
          text: "Hello",
          date_current: new Date()
        },
        {
          id: 2,
          text: "Hello2",
          date_current: new Date()
        },
        {
          id: 3,
          text: "Hello3",
          date_current: new Date()
        }
      ]
    },
    methods:{
    showButtonFunction(id){
    // this.title="dsds2"
    this.buttonIndex=id;
  },
  hideButtonFunction(){
    this.buttonIndex=false;
  }
    }
})

Feel free to check out this Link for a live demo :)

Answer 4

You have the ability to implement this functionality using VueJS as well, similar to the following example:

<div id="app">
     <table class="table table-condensed">
       <thead>
         <tr>
           <th>id</th>
           <th>task</th>
           <th>date</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="row in tasks"  @mouseover="showButtonFunction(row.id)"  @mouseleave="hideButtonFunction" :key="row.id">
           <td>{{row.id}}</td>
           <td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
           <td>{{row.date_current}}</td>
           <td><button v-show="buttonIndex === row.id">Test</button></td>
         </tr>
       </tbody>
  </table>
</div>

JavaScript Code:

var vue = new Vue({
    el: '#app',
    data:{
     buttonIndex: false,
      tasks: [
        {
          id: 1,
          text: "Hello",
          date_current: new Date()
        },
        {
          id: 2,
          text: "Hello2",
          date_current: new Date()
        },
        {
          id: 3,
          text: "Hello3",
          date_current: new Date()
        }
      ]
    },
    methods:{
    showButtonFunction(id){
    // this.title="dsds2"
    this.buttonIndex=id;
  },
  hideButtonFunction(){
    this.buttonIndex=false;
  }
    }
})

Feel free to check out this Link for a live demo :)

Display a button in a single row table

Answer №1

Answer №2

Similar questions

What is the best way to display or hide specific tables depending on the button chosen?

Tips for recognizing when AJAX content, such as images and text, has been fully loaded within a div while utilizing both AJAX and jQuery

Adjust the size of the input field as text is being typed in

Passing PHP array to JavaScript in a specific format

Is there a way to declare the different types of var id along with its properties in Typescript?

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

How to Access a Method from Controller 2 in AngularJS Controller One

Looping through an array and appending distinct elements to a fresh array

Parsing temporary storage of database query results

Change the position of an HTML image when the window size is adjusted

Swapping out a code snippet within an HTML document using JavaScript

Instructions on integrating Realm SDK with Vue3

Issues arise when attempting to transmit JSON data from JavaScript to the server using the POST method

To add additional nested data to a JSON object in JavaScript, you can use the push method or update

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

Transforming iframe programming into jquery scripting

Here's a unique version: "Strategies for effectively closing a modal when moving to a

How can I match all routes in Express except for '/'?

The files being requested by jQuery Slimbox are not being retrieved properly

Creating multiple React applications using shared configuration files: A step-by-step guide