Guide on sending table data in JSON format using jQuery

Here is a table I have:

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
 $(document).ready(function(){
 $("button").click(function(){
   // Looking for suggestions here
  });
});
  </head>
  <body>
    <table>
      <tr><th>Name</th><th>Email</th></tr>
      <tr><td>abc</td><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9888b8aa98e84888085c78a8684">[email protected]</a></td></tr>
      <tr><td>xyz</td><tr><td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1169686b51767c70787d3f727e7c">[email protected]</a></td>
    </table>
    <button>click here</button>
  </body>
</html>

My goal is that upon clicking the button, it will generate a json object with all the table data and send it to another url using jquery.

Answer №1

To gather information from selected table rows, you can utilize the $.fn.map method to extract the necessary data and store it in an array:

$('button').click(function() {
    
    var data = $('table tr:gt(0)').map(function() {
        return {
            name:  $(this.cells[0]).text(),
            email: $(this.cells[1]).text()
        };
    }).get();
    
    alert(JSON.stringify(data, null, 4))
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>abc</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e2e1e0c3e4eee2eaefade0ecee">[email protected]</a></td>
    </tr>
    <tr>
        <td>xyz</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3bbbab983a4aea2aaafeda0acae">[email protected]</a></td>
    </tr>    
</table>
<button>click here</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating additional fields in the MySQL database specifically for the newsletter

While I have a basic understanding of PHP and MySQL, creating a newsletter from scratch has proven to be quite challenging for me. Luckily, I stumbled upon a newsletter tutorial on Git Hub that caught my attention. I am interested in implementing this new ...

Ways to align pictures in the center vertically when placed side by side

Can someone help me make the transition between tall and short images on my website smoother? I am not familiar with coding terminology, so please bear with me. The attached image provides a visual representation of the changes I am looking for: click he ...

HTML form not compatible with POST method in MVC

Why doesn't the $.post() method work in this case? I have tried pressing the button but it doesn't seem to post to EditClassLessonHour. This is the corresponding View Code: <div class="jumbotron"> <form id="editClassLessonHour"> ...

CSS Assistance - Ensuring top div remains fixed while allowing bottom div to occupy remaining page space - Troubleshooting bottom div background issue

Currently in the process of building a new website and below is the initial code draft. Encountering an issue with the bottom content div. When there is less content, the bottom div fills up the remaining browser space just fine. However, when more conte ...

Obtaining Data from CRM 2011 with the Power of jQuery and JavaScript

Currently, I am facing an issue while attempting to retrieve data from CRM 2011 using jQuery. Despite my efforts, I am unable to successfully fetch the desired data. Below is the code that I have been working on: function GetConfigurations() { var oDataP ...

Preventing a user from accessing the login page if they are already logged in using Reactjs

I need assistance with implementing a "Login Logout" module in Reactjs using the nextjs framework. My goal is to redirect users to the "dashboard" page if they are logged in (email set in cookie). However, I am encountering an error with the following co ...

Exploring the potential of HTML5, Canvas, and the FireFox

There are a few inquiries I have about the HTML5-Canvas code provided below. The text is not visible in Firefox 3.6 (though it shows up on Chrome.) In regards to the ctx variable (ctx = c.getContext("2d")), should this variable be reutilized multiple ...

Ways to set a default value in AngularJS when there is no value to compare in an array

Hello, I'm a newcomer to AngularJS and I have the following code snippet in HTML: // Here, I have another ng-repeat loop where I compare home.home_info_id with avg.home_inof_id <div ng-repeat='home in homeDetailInfo'> <div ng-r ...

What is the best method for choosing all elements located between two specific elements?

If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery? <p id="one"></p> <p></p> <p></p> <p></p> <p></p> <p></ ...

Issue with connecting Drupal 8 theme styling to website pages

Although the theme is functioning properly, the CSS styles are not being applied. Even when inspecting the developer console in Firefox, there seems to be a disconnect with the page. I verified that manually applying the CSS through the developer console i ...

The shadow cast by the point light in Three.js seems to be misplaced

Take a look at this JS fiddle to view my code. I'm encountering an issue where there is a gap between the object and its shadow. Interestingly, this gap does not occur with spot lights. Any suggestions on how I can resolve this? Highlighted code snip ...

Unable to access the length property of an undefined variable in a Node.js environment

const cities = require('./cities'); const { places, descriptor } = require('./seedHelpers'); const Campground = require('../models/campground'); const { length } = require('./cities'); mongoose.connect('mongodb ...

Capture all parameters in the URL, regardless of their names

Hello, I am currently utilizing the s:url tag to create a URL in my JSP file for pagination purposes. The issue I am facing is that when clicking on the previous link, it generates a URL in the address bar like someAction?previuos=prev. Similarly, when cli ...

Generate images in real-time based on model element properties

I have a ViewModel that includes a collection of strings that I intend to use for dynamically displaying images on a Razor view. public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", ...

Transmitting information via ajax in a React.js application

Here is the React code that I have: var AddRecord = React.createClass({ componentDidMount: function() { }, render: function() { return ( <form action="process.php" method="post"> <table><tr>< ...

firefox does not support webm video format playback

I'm having trouble incorporating an HTML video tag into my project. Here is the code I am using: <video controls="controls" tabindex="5"> <source src="Videos/2.webm" type="video/webm"> <source src="Videos/2.ogv" type="video/ ...

What is the best way to limit the character display to a maximum of 30 in Vue.js?

My current goal involves achieving the following task. In a certain variable, I currently have this text: let text = 'hey this is a super long phrase' I am looking to utilize a label to showcase the text, but with only a limited number of char ...

Simple Method to Retrieve one document from Firebase v9 in a React Application

Is it possible to retrieve a document from Firebasev9 using a slug instead of an id with the useDocument Hook? useDocument Hook import { useEffect, useState } from "react" // firebase import import { doc, onSnapshot } from "firebase/firesto ...

Understanding Intl.NumberFormat: Languages and Currency Symbols

I want to implement the Intl.NumberFormat in my Angular6 Application to format currency. It works perfectly with USD, but when I try to use South African Rand or United Arab Emirates Dirham, I encounter a problem: I keep receiving a RangeError: Value R ou ...

What is the method in the Node URL module to set multiple search parameters simultaneously?

It appears that there is a way to set parameters in the URL like this: myUrl.searchParams.set('param1', 'value'); myUrl.searchParams.set('param2', 'value'); ... However, I would prefer to do something more concise, ...