替换生成的表头中的文本 - Javascript

时间:2015-11-20 17:06:21

标签: javascript html replace

我有一个生成的表,如下所示:

<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元素。

4 个答案:

答案 0 :(得分:0)

标记有点搞砸了,看起来你需要执行以下操作:

&#13;
&#13;
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;
&#13;
&#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>