Question

我有一个表格，显示各个地点的开放时间，看起来有点像以下结构；

<table class="tblServices">
 <tbody>
   <tr class="name loc1">
    <td class="name">loc1</td>
    <td class=""tcDayTimes">9-5</td>
    <td class="tcDayTimes">9-5</td>
   </tr>
   <tr class="name loc2">
    <td class="name">loc1</td>
    <td class="tcDayTimes">9-5</td>
    <td class="tcDayTimes">9-5</td>
   </tr>
 </tbody>
</table>

我想做的是在类“ loc2”的行内用类“ tcDayTimes”更改所有表单元格的值，我已经与以下jQuery保持了联系，但是它替换了每个表的值此类的单元格，无论其在哪个表行中。

           <script type="text/javascript">
                    $('.tblServices > tbody > tr.loc2').each(
        $('td.tcDayTimes').html("24 hours")

有人可以提供一些有关我要去哪里的建议吗？

预先感谢

Answer 1

您的html中有一个错字，否则...

proc sql;
   create view work.cars_rev as
   select *
   from sashelp.cars
   order by monotonic() desc;
quit;

$('.tblServices > tbody > tr.loc2').each(function(){ $('td.tcDayTimes', this).html("24 hours") });是您要遍历的tr。 this的第二个参数是上下文。

OR

$()

Answer 2

jQuery

你很近。在选择器中，您需要添加> .tcDayTimes，它将项目存储到NodeList中。然后使用.html()更改所有这些元素的html。

$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
  <tbody>
    <tr class="name loc1">
      <td class="name">loc1</td>
      <td class="tcDayTimes">9-5</td>
      <td class="tcDayTimes">9-5</td>
    </tr>
    <tr class="name loc2">
      <td class="name ">loc1</td>
      <td class="tcDayTimes">9-5</td>
      <td class="tcDayTimes">9-5</td>
    </tr>
  </tbody>
</table>

Vanilla Javascript

您还可以在香草javascript中使用以下方法执行此操作。这基本上是使用.querySelectorAll()选择所需的值并将其存储到NodeList（如数组）中。然后，您可以使用.innerHTML设置这些元素的html。

var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");

elements.forEach(e => {
  e.innerHTML = "24 hours";
});

<table class="tblServices">
  <tbody>
    <tr class="name loc1">
      <td class="name">loc1</td>
      <td class="tcDayTimes">9-5</td>
      <td class="tcDayTimes">9-5</td>
    </tr>
    <tr class="name loc2">
      <td class="name ">loc1</td>
      <td class="tcDayTimes">9-5</td>
      <td class="tcDayTimes">9-5</td>
    </tr>
  </tbody>
</table>

您不需要>。您可以只拥有.tblServices tbody .loc2 .tcDayTimes，但它看起来更整洁，如果我是您，我会保留在那儿。

jQuery-根据表行类更改表单元格值

2 个答案:

jQuery

Vanilla Javascript