How to replace a text from a dynamic table into a picture-CodePudding

On my site I have a scoreboard that receives it's info from a other website, so the content is dynamic. I am trying to replace parts of the content of a table with pictures. So that instead of the 3 letterword of a club the logo appears. But my knowledge of CSS an Jquery is not large enough. Can someone help my with the CSS or other html language parts?

This is the content 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>MANNEN</h1>
        </th>
      </tr>
      <tr>
        <td width=14%>DATUM</td>
        <td width=13%>UUR</td>
        <td width=12%>THUIS</td>
        <td width=12%>UIT</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>VROUWEN</h1>
        </th>
      </tr>
      <tr>
        <td width=14%>DATUM</td>
        <td width=13%>UUR</td>
        <td width=12%>THUIS</td>
        <td width=12%>UIT</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>

CodePudding user response：

Your table stucture doesn't follow the expected pattern. Maybe the browser is also rewriting the tags to match the correct hierarchy, what "breaks" the selector logic inside the image replacer function.

Try:

<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>

CodePudding user response：

EDIT: I see how the code is supposed to work now. See edited code below.

You're not including the src tags correctly. In every script and image tag, you included something like "//google.com". That's not a valid URL. Usually, if you're fetching from another URL, you put something like src="https://google.com/"
The JS file you linked has an error in it. You can see it if you open the console. It's not using the proper path for the css file. It's saying the path for the css file pb-blocks.css is at stats.pointbench.com/css/pb-blocks.css but I'd bet it's actually at, following the same path structure as the JS file, stats.pointbench.com/pointbench/css/pb-blocks.css

After