Vue Js Table with Edit and Delete Button

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <h3>Vue Js Table with edit and delete button</h3>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-if="!row.editing">{{ row.name }}</td>
          <td v-if="!row.editing">{{ row.email }}</td>
          <td v-if="row.editing"><input type="text" v-model="row.name"></td>
          <td v-if="row.editing"><input type="email" v-model="row.email"></td>
          <td>
            <button v-if="!row.editing" class="edit-button" @click="editRow(row)">Edit</button>
            <button v-if="row.editing" class="save-button" @click="saveRow(row)">Save</button>
            <button class="delete-button" @click="deleteRow(index)">Delete</button>

</td>
        </tr>
      </tbody>
    </table>
    <button @click="addRow" class="add-button">Add Row</button>
  </div>
  <script type="module">
    const app = Vue.createApp({
      // Define the data properties and methods for the app
      data() {
        return {
          rows: [
            { name: 'John', email: 'john@example.com', editing: false },
            { name: 'Jane', email: 'jane@example.com', editing: false },
            { name: 'Bob', email: 'bob@example.com', editing: false }
          ]
        }
      },
      methods: {
        editRow(row) {
          row.editing = true;
        },
        saveRow(row) {
          row.editing = false;
        },
        deleteRow(index) {
          this.rows.splice(index, 1);
        },
        addRow() {
          this.rows.push({ name: '', email: '', editing: true });
        }
      }
    });

app.mount("#app");
  </script>

th,
    td {
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }

th {
      background-color: #f2f2f2;
    }

tr:nth-child(even) {
      background-color: #f2f2f2;
    }

tr:hover {
      background-color: #ddd;
    }

input[type=text],
    input[type=email] {
      width: 100%;
      padding: 6px 10px;
      margin: 4px 0;
      box-sizing: border-box;

}

button {
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 4px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.3s ease-in-out;
    }

.edit-button {
      background-color: #2196F3;
      color: white;
    }

.edit-button:hover {
      background-color: #1976D2;
    }

.save-button {
      background-color: #4CAF50;
      color: white;
    }

.save-button:hover {
      background-color: #388E3C;
    }

.delete-button {
      background-color: #f44336;
      color: white;
    }

.delete-button:hover {
      background-color: #C62828;
    }

.add-button {
      margin-top: 1rem;
      background-color: #4CAF50;
      color: white;
    }

.add-button:hover {
      background-color: #3e8e41;
    }
  </style>

</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <h3>Vue Js Table with edit and delete button</h3>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-if="!row.editing">{{ row.name }}</td>
          <td v-if="!row.editing">{{ row.email }}</td>
          <td v-if="row.editing"><input type="text" v-model="row.name"></td>
          <td v-if="row.editing"><input type="email" v-model="row.email"></td>
          <td>
            <button v-if="!row.editing" class="edit-button" @click="editRow(row)">Edit</button>
            <button v-if="row.editing" class="save-button" @click="saveRow(row)">Save</button>
            <button class="delete-button" @click="deleteRow(index)">Delete</button>
​
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addRow" class="add-button">Add Row</button>
  </div>
  <script type="module">
    const app = Vue.createApp({
      // Define the data properties and methods for the app
      data() {
        return {
          rows: [
            { name: 'John', email: 'john@example.com', editing: false },
            { name: 'Jane', email: 'jane@example.com', editing: false },
            { name: 'Bob', email: 'bob@example.com', editing: false }
          ]
        }
      },
      methods: {
        editRow(row) {
          row.editing = true;
        },
        saveRow(row) {
          row.editing = false;
        },
        deleteRow(index) {
          this.rows.splice(index, 1);
        },
        addRow() {
          this.rows.push({ name: '', email: '', editing: true });
        }
      }
    });
​
    app.mount("#app");
  </script>
​
  <style scoped>
    /* CSS code */
    table {
      border-collapse: collapse;
      width: 100%;
    }
​
    th,
    td {
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }
​
    th {
      background-color: #f2f2f2;
    }
​
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
​
    tr:hover {
      background-color: #ddd;
    }
​
    input[type=text],
    input[type=email] {
      width: 100%;
      padding: 6px 10px;
      margin: 4px 0;
      box-sizing: border-box;
​
    }
​
    button {
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 4px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.3s ease-in-out;
    }
​
    .edit-button {
      background-color: #2196F3;
      color: white;
    }
​
    .edit-button:hover {
      background-color: #1976D2;
    }
​
    .save-button {
      background-color: #4CAF50;
      color: white;
    }
​
    .save-button:hover {
      background-color: #388E3C;
    }
​
    .delete-button {
      background-color: #f44336;
      color: white;
    }
​
    .delete-button:hover {
      background-color: #C62828;
    }
​
    .add-button {
      margin-top: 1rem;
      background-color: #4CAF50;
      color: white;
    }
​
    .add-button:hover {
      background-color: #3e8e41;
    }
  </style>
​
​
</body>
​
</html>