我有一个生成的表,如下所示:
<table width="100%" id="BdwpRows" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr class="BDLheader-style" valign="top">
<th width="1" class="ms-vh"></th>
<th align="left" class="ms-vh"><table class="ms-unselectedtitle" id="msomenuid7" onmouseover="OnMouseOverAdHocFilter(this, 'Header1 @Header1 text;1033 ctl00$ctl45$g_ca983ec5_e788_482a_9f71_12f0dad6f125')" cellspacing="0" ctxnum="1"><tbody><tr><td width="100%" class="ms-vb" nowrap="">Header Text 1</td>
<td style="right: 1px;"><img width="13" style="visibility: hidden;" alt="Open Menu" src="/_layouts/15/images/menudark.gif?rev=41"></td></tr></tbody></table></th>
<th align="left" class="ms-vh"><table class="ms-unselectedtitle" id="msomenuid2" onmouseover="OnMouseOverAdHocFilter(this, 'Original_Budget_Amount @Original_Budget_Amount text;1033 ctl00$ctl45$g_ca983ec5_e788_482a_9f71_12f0dad6f125')" cellspacing="0" ctxnum="1"><tbody><tr><td width="100%" class="ms-vb" nowrap="">Budget Amount</td>
<td style="right: 1px;"><img width="13" style="visibility: hidden;" alt="Open Menu" src="/_layouts/15/images/menudark.gif?rev=41"></td></tr></tbody></table></th>
<th align="left" class="ms-vh"><table class="ms-unselectedtitle" onmouseover="OnMouseOverAdHocFilter(this, 'Header3 @Header3 number;1033 ctl00$ctl45$g_ca983ec5_e788_482a_9f71_12f0dad6f125')" cellspacing="0" ctxnum="1"><tbody><tr><td width="100%" class="ms-vb" nowrap="">Header Text 3</td>
<td style="right: 1px;"><img width="13" style="visibility: hidden;" alt="Open Menu" src="/_layouts/15/images/menudark.gif?rev=41"></td></tr></tbody></table></th>
<th align="left" class="ms-vh"><table class="ms-unselectedtitle" onmouseover="OnMouseOverAdHocFilter(this, 'Header4 @Header4 number;1033 ctl00$ctl45$g_ca983ec5_e788_482a_9f71_12f0dad6f125')" cellspacing="0" ctxnum="1"><tbody><tr><td width="100%" class="ms-vb" nowrap="">Header Text 4</td>
<td style="right: 1px;"><img width="13" style="visibility: hidden;" alt="Open Menu" src="/_layouts/15/images/menudark.gif?rev=41"></td></tr></tbody></table></th>
<th align="left" class="ms-vh"><table class="ms-unselectedtitle" onmouseover="OnMouseOverAdHocFilter(this, 'Header5 @Header5 text;1033 ctl00$ctl45$g_ca983ec5_e788_482a_9f71_12f0dad6f125')" cellspacing="0" ctxnum="1"><tbody><tr><td width="100%" class="ms-vb" nowrap="">Header Text 5</td>
<td style="right: 1px;"><img width="13" style="visibility: hidden;" alt="Open Menu" src="/_layouts/15/images/menudark.gif?rev=41"></td></tr></tbody></table></th>
</tr>
</tbody></table>
我需要使用JavaScript更改文本'Budget Amount'。我无法弄清楚如何选择它,因为没有定义的id元素。
答案 0 :(得分:0)
标记有点搞砸了,看起来你需要执行以下操作:
var tgt = document.querySelector('table.ms-unselectedtitle > tbody > tr > td');
tgt.innerHTML = "Whatever U want";
&#13;
table {
outline: 1px solid red;
}
td,
th {
min-width: 50px;
min-height: 50px;
}
&#13;
<table id="BdwpRows">
<tbody>
<tr class="BDLheader-style">
<th></th>
<th></th>
<th></th>
<!--This is another table?-->
<table class="ms-unselectedtitle">
<tbody>
<tr>
<td>Budget Amount</td>
</tr>
</tbody>
</table>
&#13;
答案 1 :(得分:0)
通过使用jQuery,您实际上可以将其清理为一行代码。这样做是使用您的ms-unselectedtitle
类找到该表,然后找到td
(跳过搜索tr),然后设置文本的值。此外,请确保在您提供演示代码时,还包括所有包装器。我不得不关闭外面的表行,正文和实际表格。
$('.ms-unselectedtitle').find('td').html('New Text Value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="BdwpRows">
<tbody>
<tr class="BDLheader-style">
<th></th>
<th></th>
<th>
<table class="ms-unselectedtitle">
<tbody>
<tr>
<td>Budget Amount</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
答案 2 :(得分:0)
您可以使用id找到外部表,然后使用querySelector和querySelectorAll方法钻入内部表。例如......
var td = document.getElementById("BdwpRows").querySelector("tbody").querySelector("tr").querySelectorAll("th")[2].querySelector("table").querySelector("tbody").querySelector("tr").querySelector("td");
td.textContent = "new text here";
如果您知道&#34; ms-unselectedtitle&#34; class只在一个地方使用,然后你可以通过直接找到内部表然后从那里向下钻取来缩短过程,就像在其他一些答案中一样。
答案 3 :(得分:0)
尝试使用document.querySelectorAll()
,for
循环,.children
,.item()
,.textContent
var tr = document.querySelectorAll("#BdwpRows tr");
var text = "Budget Amount";
var replacement = "New Budget Amount";
for (var i = 0; i < tr.length; i++) {
if (tr[i].children.item("td").textContent === text) {
tr[i].children.item("td").textContent = replacement
};
}
var tr = document.querySelectorAll("#BdwpRows tr");
var text = "Budget Amount";
var replacement = "New Budget Amount";
for (var i = 0; i < tr.length; i++) {
if (tr[i].children.item("td").textContent === text) {
tr[i].children.item("td").textContent = replacement
};
}
<table id="BdwpRows">
<tbody>
<tr class="BDLheader-style">
<th></th>
<th></th>
<th>
<table class="ms-unselectedtitle">
<tbody>
<tr>
<td>Budget Amount</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>