文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何通过javascript更改html中所有td标签的值

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

Stack Overflow用户
提问于 2015-12-17 15:03:49
回答 4查看 2.4K关注 0票数 0

嘿，我想用javascript ..any动态地改变我的html里面所有td标签的值，猜猜我们能不能做it...here是我的html的示例代码，我想通过javasript改变它的值，请help..nd提前谢谢…

​

代码语言：javascript
复制
<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>

​

javascript
jquery
html
EN

回答 4

Stack Overflow用户

发布于 2015-12-17 15:07:03

更改html中所有td标记的值

使用getElementsByTagName()

代码语言：javascript
复制
vat allTDs = document.getElementsByTagName( "td" );
for ( var counter = 0; counter < allTDs.length; counter++ )
{
   allTDs[ counter ].innerHTML = "WHATEVER YOU LIKE";
}
票数 3
EN

Stack Overflow用户

发布于 2015-12-17 15:19:22

jQuery万岁！

代码语言：javascript
复制
$('td').html("<b>Hello table data</b>")

我喜欢@gurvinder372的原生方法，但你无法胜过来自jQuery的一行程序。但是，一种功能更强大的本机方法可能如下所示：

代码语言：javascript
复制
var paragraphs = document.getElementsByTagName('p');
var helloPee = function (p) {
  p.innerHTML = 'Hello P!'
};
[].forEach.call(paragraphs, helloPee);
票数 0
EN

Stack Overflow用户

发布于 2015-12-17 15:34:52

您可以添加jquery代码来查找td标记并更改您想要的文本值。像这样：

代码语言：javascript
复制
$(function(){
  $('#user-details-table').find(' td').eq(2).replaceWith("Changed Value");
});

编辑：Fiddle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34328544

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档