时间戳

首页 > 解决方案 > 使用 Jquery 更改 HTML 表格背景

javascript - 使用 Jquery 更改 HTML 表格背景

问题描述

我正在为某个平台开发扩展暗模式，但我仅限于 css 和 Jquery。我必须将不同的背景图像替换为表格单元格中的另一个 url。这非常困难，因为表格单元格没有类并且仅在 html 中。因此我只能根据属性值替换它们。我对 Javascript / Jquery 几乎一无所知，但通过搜索我发现了一些我认为应该可以工作的代码。希望你能帮助我！

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$( "td[background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif"]" ).replaceWith( "<td background="https://raw.githubusercontent.com/matti606/smart-school_dark/main/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>" );

</script>
</head>
<body>

<table width="99%" cellspacing="0" cellpadding="0" border="0" align="center" class="margin-top--milli">
<tbody><tr>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c5.gif">
    </td>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c13.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" alt="" width="15"></td>
</tr>
<tr>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r3_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
    <td bgcolor="#FFFFFF">
        
<!-- BEGIN content -->

<!-- END content -->
    </td>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r5_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
</tr>
<tr>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c3.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="3"></td>
    <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
</tr>
</tbody></table>

</body>
</html>

标签： javascripthtmljquerycss

解决方案

这可以实现每个循环td，获取对应的 URL 并获取 frameId（例如：frame_r7_c1.gif）并将旧 url 替换为具有相同 id 的新 URL。

例子：

从：

至：

关于 jQuery 的信息：https ://developer.mozilla.org/en-US/docs/Glossary/jQuery

每种方法：https ://api.jquery.com/each/

属性方法：https ://api.jquery.com/attr/

拆分方法可以在这里找到： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

// loop each td
$('tbody > tr > td').each(function() {
  // $(this) is meant for each td
  let frameBackground = $(this).attr('background'); // this will get the URL of the image
  
  // make this if statement to verify if a background is present
  if(frameBackground != undefined) {
    // split method will return a array we get the last value of array (ex: frame_r1_c5.gif)
    let array = frameBackground.split('/');

    let frameId = array[array.length -1];

    // and we replace our current background URL with ours + the frameId we got from line above
    $(this).attr('background', `https://raw.githubusercontent.com/matti606/smart-school_dark/main/${frameId}`);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<table width="99%" cellspacing="0" cellpadding="0" border="0" align="center" class="margin-top--milli">
<tbody>
  <tr>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c5.gif">
      </td>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r1_c13.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" alt="" width="15"></td>
  </tr>
  <tr> <!-- end -->
      <td background="https://static6.smart-school.net/themes/default/images/frame_r3_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
      <td bgcolor="#FFFFFF">

  <!-- BEGIN content -->

  <!-- END content -->
      </td>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r5_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
  </tr><!-- end -->
  <tr>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c3.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="3"></td>
      <td background="https://static6.smart-school.net/themes/default/images/frame_r7_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
  </tr><!-- end -->
</tbody></table>

</body>
</html>

推荐阅读