javascript - 如何通过javascript更改html中所有td标签的值

Question

嘿，我想使用 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> 

Answer 1

change the value of all the td tag inside my html

使用getElementsByTagName()

vat allTDs = document.getElementsByTagName( "td" );
for ( var counter = 0; counter < allTDs.length; counter++ )
{
   allTDs[ counter ].innerHTML = "WHATEVER YOU LIKE";
}