个人中心
gpt4 book ai didi

javascript - 将 CSS 类添加到以大写字母开头的行

转载 作者：行者123 更新时间：2023-11-28 05:59:51 25 4
gpt4 key购买 nike

我是 Javascript 和 Jquery 的新手。我想通过 Jquery 将 CSS 类添加到以大写字母开头的行。 HTML 代码由 Django Admin 自动生成。例如这一行:

<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---&gt; </a></th></tr>

必须有红色背景。

这是我的源代码，但它不起作用。 

<!DOCTYPE html>
<html>
<head>


    <style>
important {background-color:red}'
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">

        var t = document.getElementsByClassName("field-__str__").textContent;
        //alert(t);
        if(t.charAt(0) === t.charAt(0).toUpperCase())
        {
            $("field-__str__ tr th a").addClass("important");
        }
    </script>
</head>
<body>
<table id="result_list">
<thead>
<tr>

<th scope="col"  class="action-checkbox-column">

   <div class="text"><span><input type="checkbox" id="action-toggle" /></span></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="column-__str__">

   <div class="text"><span>Bigram</span></div>
   <div class="clear"></div>
</th>
</tr>
</thead>
<tbody>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3640" /></td><th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---&gt; </a></th></tr>

<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3554" /></td><th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3553" /></td><th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3552" /></td><th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3551" /></td><th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3550" /></td><th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3549" /></td><th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3548" /></td><th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3547" /></td><th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3546" /></td><th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3545" /></td><th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3544" /></td><th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---&gt; </a></th></tr>


<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3543" /></td><th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---&gt; </a></th></tr>


<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3542" /></td><th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---&gt; </a></th></tr>
</tbody>
</table>
</body>
</html>

谢谢大家!

最佳答案

缺少 . 选择器 $("field-__str__ tr th a").addClass("important"); ，还有 tr不是 .field-__str__ 的子节点。将 javascript 包装在 .ready() 中，以便在加载 document 时调用。

    $(function() {
      var t = $(".field-__str__");
      for (var i = 0; i < t.length; i++) {
        var text = t.eq(i).text().trim().charAt(0);
        if (text === text.toUpperCase()) {
          t.eq(i).find("a").addClass("important");
        }
      }
    })

<!DOCTYPE html>
<html>
<head>
  <style>
    .important {
      background-color: red
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var t = $(".field-__str__");
      for (var i = 0; i < t.length; i++) {
        var text = t.eq(i).text().trim().charAt(0);
        if (text === text.toUpperCase()) {
          t.eq(i).find("a").addClass("important");
        }
      }
    })
  </script>
</head>

<body>
  <table id="result_list">
    <thead>
      <tr>

        <th scope="col" class="action-checkbox-column">

          <div class="text"><span><input type="checkbox" id="action-toggle" /></span>
          </div>
          <div class="clear"></div>
        </th>
        <th scope="col" class="column-__str__">

          <div class="text"><span>Bigram</span>
          </div>
          <div class="clear"></div>
        </th>
      </tr>
    </thead>
    <tbody>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3641" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3640" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---&gt; </a>
        </th>
      </tr>

      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3554" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3553" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3552" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3551" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3550" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3549" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3548" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3547" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3546" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3545" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3544" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---&gt; </a>
        </th>
      </tr>


      <tr class="row1">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3543" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---&gt; </a>
        </th>
      </tr>


      <tr class="row2">
        <td class="action-checkbox">
          <input class="action-select" name="_selected_action" type="checkbox" value="3542" />
        </td>
        <th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---&gt; </a>
        </th>
      </tr>
    </tbody>
  </table>
</body>

</html>

关于javascript - 将 CSS 类添加到以大写字母开头的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36824462/

25 4 0
文章推荐： c++ - 蒙特卡洛误差
文章推荐： javascript - 通过 JavaScript 将对象附加到 DOM 的背景音乐
文章推荐： c++ - 使用 sched_yield 控制线程执行
文章推荐： javascript - 需要在加载时触发鼠标移动功能
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com