Jquery -基于表行类更改表单元格值
Jquery -基于表行类更改表单元格值
提问于 2019-03-08 08:21:42
我有一个表格，显示不同地点的开放时间，看起来有点像下面的结构；
<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>我想要做的是改变行中类"tcDayTimes“的所有表格单元格的值"loc2"，我已经接近了下面的jquery，但它替换了每个单元格的值，无论它在哪个表格行中。
<script type="text/javascript">
$('.tblServices > tbody > tr.loc2').each(
$('td.tcDayTimes').html("24 hours")有没有人能给我一些建议，告诉我哪里出了问题？
提前感谢
回答 2
Stack Overflow用户
发布于 2019-03-08 08:23:41
你的html中有一个打字错误，但除此之外...
$('.tblServices > tbody > tr.loc2').each(function(){
$('td.tcDayTimes', this).html("24 hours")
});其中this是您要迭代的tr。$()的第二个参数是上下文。
或
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");Stack Overflow用户
发布于 2019-03-08 08:27:16
jQuery
你们已经很接近了。在选择器中，您需要添加将项目存储到NodeList中的> .tcDayTimes。然后使用.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
您也可以使用以下方法在vanilla 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**，，但它看起来更整洁，如果我是你的话，我会把它留在那里。**
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55054939
复制相关文章
相似问题
腾讯云开发者
