Transforming dynamic table text into an image: Step-by-step guide

Question

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my knowledge of CSS and jQuery is limited, so I'm seeking assistance with implementing these changes using HTML.

Below is the code that generates the table:

<style>
  table,
  td,
  th {
    border: 1px solid #ddd;
    text-align: center;
    font-size: 15px;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th,
  td {
    padding: 1px;
  }
  
  th {
    background-color: #c71b1b
  }
  
  th,
  td1 {
    padding: 1px;
  }
  
  th {
    background-color: #c71b1b
  }
</style>


<div style="overflow-x:auto;">
  <table cellspacing="20">
    <tbody>
      <tr>
        <th colspan="5">
          <h1>MEN</h1>
        </th>
      </tr>
      <tr>
        <td width=14%>DATE</td>
        <td width=13%>TIME</td>
        <td width=12%>HOME</td>
        <td width=12%>AWAY</td>
        <td width=49%>SCORE</td>
      </tr>
    </tbody>
  </table>
  <table cellspacing="20">
    <tbody>
      <tr>
        <div class="pb-dynamic" id="block-main-men">
          <p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
        </div>
      </tr>
    </tbody>
  </table>
  <table cellspacing="20">
    <tbody>
      <tr>
        <th colspan="5">
          <h1>WOMEN</h1>
        </th>
      </tr>
      <tr>
        <td width=14%>DATE</td>
        <td width=13%>TIME</td>
        <td width=12%>HOME</td>
        <td width=12%>AWAY</td>
        <td width=49%>SCORE</td>
      </tr>
    </tbody>
  </table>
  <table cellspacing="20">
    <tbody>
      <tr>
        <div class="pb-dynamic" id="block-main-women">
          <p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
        </div>
      </tr>
    </tbody>
  </table>
</div>

<!-- Include JS script to do the job, block definition(s) and main function call -->
<script src="//stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--//--><![CDATA[// ><!--


  blockdefs = [{
      leagueid: 'bel/29/2022',
      blocktype: 'team-games',
      target: 'block-main-men',
      teamid: '413'
    },
    {
      leagueid: 'bel/30/2022',
      blocktype: 'team-games',
      target: 'block-main-women',
      teamid: '207'
    }
  ];

  PBShowBlocks(blockdefs);


  //--><!]]>
</script>
<!-- End -->
</div>

</div>

javascript html jquery css

Answer 1

Answer №1

The type of table layout you are using does not align with the expected structure. It is possible that the browser is adjusting the tags to fit the correct hierarchy, causing issues with the selector logic in the image replacement function.

Consider the following structure:

<table cellspacing="20">
   <tbody>
      <tr>
         <td>       
            <div class="pb-dynamic" id="block-main-women">
               <p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Answer 2

The type of table layout you are using does not align with the expected structure. It is possible that the browser is adjusting the tags to fit the correct hierarchy, causing issues with the selector logic in the image replacement function.

Consider the following structure:

<table cellspacing="20">
   <tbody>
      <tr>
         <td>       
            <div class="pb-dynamic" id="block-main-women">
               <p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Answer 3

Answer №2

UPDATE: After reviewing the code, I have identified the necessary corrections. Please refer to the modified code below.

The issue lies in the incorrect usage of the src tags. In the script and image tags, you used something like "//google.com" which is not a valid URL format. Typically, when fetching from another URL, you should use
```
src="https://google.com/"
```
Upon inspecting the linked JS file, an error was found. This can be observed in the console log. The file is referencing the css file pb-blocks.css at
```
stats.pointbench.com/css/pb-blocks.css
```
. The correct path should be
```
stats.pointbench.com/pointbench/css/pb-blocks.css
```
as indicated here:

If you have access to the server, you can rectify this issue there. Alternatively, a fix will be provided at the end of this response.

To resolve the broken JS file, access the file's URL, copy its content, and place it in your public/assets route.

Search for every occurrence of

document.getElementsByTagName("head")[0].appendChild(fileref);

. Above this line, you will find

fileref.setAttribute("href", gUpdateDomain + "pointbench/css/pb-blocks.css");

. Replace it with

fileref.setAttribute("href", "https://stats.pointbench.com/pointbench/css/pb-blocks.css");

. This modification should be done twice.

Additionally, your table structure is incorrect. Below is the corrected table structure:

    <table cellspacing="20">
        <thead>
            <tr>
              <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td></td>
            </tr>
        </tbody>
    </table>

Overall, your code needs some refinement for better readability. Unnecessary elements and closing tags without corresponding opening tags have been removed. Refer to the updated code below:

... (Your updated code will be presented here) ...

In regards to your inquiry, the replacement of team initials with team logos is achievable. Preparation of team logos is required, either by storing them locally or fetching them through an API. Assuming there's a limited number of team logos, downloading and storing them locally is feasible, enabling the substitution of initials with logos.

For demonstration purposes, a sample logo URL from the internet will be used.

Assuming the team name cells are the 2nd and 3rd cells in each row of your table, the following code snippet can be applied:

... (Your logo implementation code will be presented here) ...

Before https://i.sstatic.net/BJSq1.png

After https://i.sstatic.net/svgk1.png

Answer 4

UPDATE: After reviewing the code, I have identified the necessary corrections. Please refer to the modified code below.

The issue lies in the incorrect usage of the src tags. In the script and image tags, you used something like "//google.com" which is not a valid URL format. Typically, when fetching from another URL, you should use
```
src="https://google.com/"
```
Upon inspecting the linked JS file, an error was found. This can be observed in the console log. The file is referencing the css file pb-blocks.css at
```
stats.pointbench.com/css/pb-blocks.css
```
. The correct path should be
```
stats.pointbench.com/pointbench/css/pb-blocks.css
```
as indicated here:

If you have access to the server, you can rectify this issue there. Alternatively, a fix will be provided at the end of this response.

To resolve the broken JS file, access the file's URL, copy its content, and place it in your public/assets route.

Search for every occurrence of

document.getElementsByTagName("head")[0].appendChild(fileref);

. Above this line, you will find

fileref.setAttribute("href", gUpdateDomain + "pointbench/css/pb-blocks.css");

. Replace it with

fileref.setAttribute("href", "https://stats.pointbench.com/pointbench/css/pb-blocks.css");

. This modification should be done twice.

Additionally, your table structure is incorrect. Below is the corrected table structure:

    <table cellspacing="20">
        <thead>
            <tr>
              <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td></td>
            </tr>
        </tbody>
    </table>

Overall, your code needs some refinement for better readability. Unnecessary elements and closing tags without corresponding opening tags have been removed. Refer to the updated code below:

... (Your updated code will be presented here) ...

In regards to your inquiry, the replacement of team initials with team logos is achievable. Preparation of team logos is required, either by storing them locally or fetching them through an API. Assuming there's a limited number of team logos, downloading and storing them locally is feasible, enabling the substitution of initials with logos.

For demonstration purposes, a sample logo URL from the internet will be used.

Assuming the team name cells are the 2nd and 3rd cells in each row of your table, the following code snippet can be applied:

... (Your logo implementation code will be presented here) ...

Before https://i.sstatic.net/BJSq1.png

After https://i.sstatic.net/svgk1.png

Transforming dynamic table text into an image: Step-by-step guide

Answer №1

Answer №2

Similar questions

Efficiently submitting a directory with jQuery's AJAX capabilities

How can I attach an existing event to a dynamically loaded element using AJAX?

Having trouble getting Jquery to work with an Ajax call in the cart drawer. Any suggestions on how to resolve this issue

Utilizing a raycasting technique in conjunction with the camera to achieve a dynamic crosshair effect reminiscent of Google Cardboard

Selecting radio button does not update corresponding label

Creating a unique seal, badge, or widget in Django is a fun and rewarding project

Obtaining the Tinymce Editor Instance using WordPress JavaScript

Transitioning from mui version 4 to version 5 leads to an error message: "TypeError: Cannot access 'keyboardDate' properties of undefined"

How can I implement user-specific changes using Flask?

Verify JSON data from server using AngularJS

Transmit information to Vue.js component

Using jQuery.post to select and manipulate the target div displaying Google search results

Troubleshooting Hierarchical Ordering in Django-MPTT's recursetree Function

What is the best way to implement a toggle function using jQuery in PHP/WordPress without having to refresh the entire page?

Seamless blend of images with a stunning mosaic transition effect

How can one effectively develop a component library that is compatible with both React and Preact?

Detecting media queries for the Samsung Galaxy S3 and S4 devices

Tips for refreshing the 'state' of an Angular Router component

Tips for incorporating a value within the AngularJS select function

Guide to moving a 3D model and initiating animation in threejs when a key is pressed