嘿，我想使用 javascript 动态更改 html 中所有 td 标签的值。猜猜我们能做到吗...这是我的 html 的示例代码 我想通过javasript改变它的值怎么办请帮助..提前感谢...
<h1>Size Conformation</h1>
<a href="#logoutDialog" data-role="none" data-rel="popup" data-position="window" class="ui-btn-right ui-link" aria-haspopup="true" aria-owns="logoutDialog" aria-expanded="false"><img class="headerlogo" src="./css/images/icons-png/power-black.png"></a>
</div>
<div id="user-details-table" data-role="content">
<table style="border: none !important; width: 100%">
<thead>
<tr class="custom-table-for-user-detial">
<th colspan="3"
style="text-align: left; margin-bottom: 20px; color: #7695D8;">Employee
Details</th>
</tr>
</thead>
<tbody>
<tr class="custom-table-for-user-detial">
<td width="40%">IGA Code</td>
<td class="colon">:</td>
<td>IGA001</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Name</td>
<td class="colon">:</td>
<td id="username">Vineet Kumar</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>DOJ</td>
<td class="colon">:</td>
<td>18.04.1991</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Gender</td>
<td class="colon">:</td>
<td>Male</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Base Station</td>
<td class="colon">:</td>
<td>DEL</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Department</td>
<td class="colon">:</td>
<td class="custom-table-for-user-detial">AOC</td>
</tr>
</tbody>
</table>
</div>
<div class="white-background" style="margin-left: 20px;"
data-theme="d">
<div class="center">
<form>
<div data-role="collapsible" data-content-theme="c"
data-iconpos="right">
<h3 style="text-align: justify; text-justify: inter-word;">
Entitlement</h3>
<div id="sizeable" style="text-align: left; margin-top: 10px; padding: 5px;">Sizable
Items</div>
<div
style="width: 100% !important; height: 1px; background: #dedde2;"></div>
<table cellspacing="0" style="width: 100%">
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Shirt</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="shirt" id="shirt" data-theme="a" style="display: inline;">
<option style="background-color: #fff;">Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Pent</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="pent" id="pent" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Belt</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="belt" id="belt" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Hat</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="hat" id="hat" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Overcoat</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="overcoat" id="overcoat" data-theme="a"
style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Cabin Shue</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="cabin-shue" id="cabin-shue" data-theme="a"
style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
</table>
</div>
</form>
</div>
<div class="center">
<div style="width: 50%; float: right !important; margin-right: 0px;">
<a class="inner" id="new-joinee-submit" data-role="button"
data-theme="e" href="javascript:newJoineeSubmit()">Submit</a>
</div>
</div>
</div>
</div> 最佳答案
change the value of all the td tag inside my html
vat allTDs = document.getElementsByTagName( "td" );
for ( var counter = 0; counter < allTDs.length; counter++ )
{
allTDs[ counter ].innerHTML = "WHATEVER YOU LIKE";
}
关于javascript - 如何通过javascript更改html中所有td标签的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34328544/