Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

Question

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

I have implemented a table with three columns: "Action", "Question Subquestion/Text", and "Sort order". Additionally, I have incorporated a feature that allows for drag and drop functionality on the rows.

Below is my code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table th,
    table td {
        width: 50px;
        padding: 5px;
        border: 0.5px solid black;


    }

    .GFG {
        color: green;
    }

    .OK {
        font-size: 18px;
    }
</style>

<body>
    <h2 class="GFG">Overall Experience</h2>
    <p class="OK">Drag and Drop Table Row</p>
    <table id="GFG">
        <tr>
            <td>Action</td>
            <th>Question Subquestion/Text</th>
            <th>Sort Order</th>
        </tr>
        <tr>
            <td>Delete</td>
            <td>Edit</td>
            <td>View</td>
        </tr>
        <tr>
            <td>Symbol1</td>
            <td>Question1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Symbol2</td>
            <td>Question2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Symbol3</td>
            <td>Question3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Symbol4</td>
            <td>Question4</td>
            <td>4</td>
        </tr>
    </table>
    <script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <link rel="stylesheet"
        href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript"
        src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js">
    </script>
    <script>
        $(function () {
            $("#GFG").sortable({
                items: 'tr:not(tr:first-child)',
                dropOnEmpty: false,
                start: function (G, ui) {
                    ui.item.addClass("select");
                },
                stop: function (G, ui) {
                    ui.item.removeClass("select");
                    $(this).find("tr").each(function (GFG) {
                        if (GFG > 0) {
                            $(this).find("td").eq(2).html(GFG);
                        }
                    });
                }
            });
        });
    </script>

</body>

</html>

Currently, I am looking to enhance the functionality by replacing the numbers in the "Action" column with symbols for Delete, Edit, and View. The delete symbol will allow users to remove the entire row, while the edit and view symbols will direct them to another page for editing and viewing purposes. As a newcomer to this, any assistance in implementing these changes would be greatly appreciated.

javascript html jquery css jquery-ui

Answer 1

Answer №1

When working with jQuery, it's important to consider the scalability of your app. As it grows, you may find that using a JavaScript framework like React could be beneficial.

Keep in mind that the data will not persist unless saved to a database. If you want to maintain the state, proper storage is necessary.

<h2 class="GFG">Overall Experience</h2>
<p class="OK">Drag and Drop table row</p>
<table id="GFG"></table>
<button id='reset'>Reset</button>

CSS remains unchanged

$(document).ready(() => {
  // variable to hold the top row of the table
  const tableHeader = `
    <tr>
      <td>Action</td>
      <th>Question Subquestion/Text</th>
      <th>Sort order</th>
      <th>Delete</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  `

  // initialise the list of questions - this may come from an API or external file
  let questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]; 
  
  // the function to call to rebuild the table, it makes a list of rows from
  // the questions variables and prepends the top row to make the table
  // this will be slower the more rows you have 

  // the delete button is clicked via an on click event handler below
  // view and edit are simple links that open in new tabs, change the 
  // href attribute to what you want to show
  function buildTable() {
    const list = questions.map((q, index) => {
      return (`
          <tr>
            <td>${q.id}</td>
            <td>${q.question}</td>
            <td>${index+1}</td>
            <td class='delete' data-id='${q.id}'>Delete</td>
            <td class='view'><a target="_blank" href='/view/${q.id}'>View</a></td>
            <td class='edit'><a target="_blank" href='/edit/${q.id}'>Edit</a></td>
          </tr>
        `)
    })
    $('table#GFG').html(tableHeader + list.join(''))
  }
  
  // call the buildTable function to make the table when the page loads
  buildTable()
  
  // when the delete button is clicked, delete the row associated, then rebuild
  // the table when the row is deleted to show changes
  $('table#GFG').on('click', 'td.delete', (e) => { 
    questions = questions.filter(q => {
      if (q.id != e.target.dataset.id) { return true }
    })
    buildTable() 
  })
  
  // reset the questions to the default state and rebuild table 
  $('button#reset').on('click', () => {
    questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]
    buildTable()
  })
});


// did not change this 
$(function () {
  $("#GFG").sortable({
    items: 'tr:not(tr:first-child)',
    dropOnEmpty: false,
    start: function (G, ui) {
      ui.item.addClass("select");
    },
    stop: function (G, ui) {
      ui.item.removeClass("select");
      $(this).find("tr").each(function (GFG) {
        if (GFG > 0) {
          $(this).find("td").eq(2).html(GFG);
        }
      });
    }
  });
});

Answer 2

When working with jQuery, it's important to consider the scalability of your app. As it grows, you may find that using a JavaScript framework like React could be beneficial.

Keep in mind that the data will not persist unless saved to a database. If you want to maintain the state, proper storage is necessary.

<h2 class="GFG">Overall Experience</h2>
<p class="OK">Drag and Drop table row</p>
<table id="GFG"></table>
<button id='reset'>Reset</button>

CSS remains unchanged

$(document).ready(() => {
  // variable to hold the top row of the table
  const tableHeader = `
    <tr>
      <td>Action</td>
      <th>Question Subquestion/Text</th>
      <th>Sort order</th>
      <th>Delete</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  `

  // initialise the list of questions - this may come from an API or external file
  let questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]; 
  
  // the function to call to rebuild the table, it makes a list of rows from
  // the questions variables and prepends the top row to make the table
  // this will be slower the more rows you have 

  // the delete button is clicked via an on click event handler below
  // view and edit are simple links that open in new tabs, change the 
  // href attribute to what you want to show
  function buildTable() {
    const list = questions.map((q, index) => {
      return (`
          <tr>
            <td>${q.id}</td>
            <td>${q.question}</td>
            <td>${index+1}</td>
            <td class='delete' data-id='${q.id}'>Delete</td>
            <td class='view'><a target="_blank" href='/view/${q.id}'>View</a></td>
            <td class='edit'><a target="_blank" href='/edit/${q.id}'>Edit</a></td>
          </tr>
        `)
    })
    $('table#GFG').html(tableHeader + list.join(''))
  }
  
  // call the buildTable function to make the table when the page loads
  buildTable()
  
  // when the delete button is clicked, delete the row associated, then rebuild
  // the table when the row is deleted to show changes
  $('table#GFG').on('click', 'td.delete', (e) => { 
    questions = questions.filter(q => {
      if (q.id != e.target.dataset.id) { return true }
    })
    buildTable() 
  })
  
  // reset the questions to the default state and rebuild table 
  $('button#reset').on('click', () => {
    questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]
    buildTable()
  })
});


// did not change this 
$(function () {
  $("#GFG").sortable({
    items: 'tr:not(tr:first-child)',
    dropOnEmpty: false,
    start: function (G, ui) {
      ui.item.addClass("select");
    },
    stop: function (G, ui) {
      ui.item.removeClass("select");
      $(this).find("tr").each(function (GFG) {
        if (GFG > 0) {
          $(this).find("td").eq(2).html(GFG);
        }
      });
    }
  });
});

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS

Answer №1

Similar questions

Updating and Preserving Content in Angular

Can next.js rewrites be configured with environment variables?

Duplicate table row and insert new cell

Removing a document from Firestore using React

Is there any potential security vulnerability when using ActiveRecord::Serialization.from_json() in RoR to parse uploaded JSON?

Issue regarding the slash format in credit card expiration dates

Utilizing Javascript to Connect with Java Web API

Refreshing infinitescroll plugin with updated URL link upon clicking

The expandable row remains open even after filtering the table with JavaScript

Select a division and retrieve the identification of a different division

Using Python's BeautifulSoup library to extract tables from archived HTML webpages

Experimenting with a Jest test on an express middleware

An error is occurring in asp.net where the ajax call is returning an undefined object

Utilizing jQuery for AJAX to send data variables

Having trouble showing the information in JavaScript

Avoiding mistakes in class and id names with preventative tools

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Signing up for event using react leaflet

Is there a way for me to send a URL request from my website to a different server using PHP?

Interacting between two occurrences of the identical Angular component