Heyy我想使用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>
答案 0 :(得分：3)
更改html
中所有td标记的值
vat allTDs = document.getElementsByTagName( "td" );
for ( var counter = 0; counter < allTDs.length; counter++ )
{
allTDs[ counter ].innerHTML = "WHATEVER YOU LIKE";
}
答案 1 :(得分：0)
Viva la / le jQuery！
$('td').html("<b>Hello table data</b>")
我喜欢来自@ gurvinder372的原生方法，但你无法从jQuery中击败单行。但是，更实用的本机方法可能如下所示：
var paragraphs = document.getElementsByTagName('p');
var helloPee = function (p) {
p.innerHTML = 'Hello P!'
};
[].forEach.call(paragraphs, helloPee);
答案 2 :(得分：0)
您可以添加jquery代码以查找td标记并更改所需的文本值。
像：
$(function(){
$('#user-details-table').find(' td').eq(2).replaceWith("Changed Value");
});
已编辑：Fiddle
答案 3 :(得分：0)
使用 document.querySelectorAll - 它是本机浏览器功能，不需要库。
var trs = document.querySelectorAll("#user-details-table tbody tr");
var tds, value,i;
for (i in trs) {
if (!tr.hasOwnProperty(i)) continue;
tds = tr[i].children;
value = "ilya"; // select it based on row number (i)
tds[2].textContent = value;
}