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

Question

Heyy i wanna dynamically change the value of all the td tag inside my html using javascript ..any guess hoe can we do it...here is the sample code of my html i wanna change its value via javasript how can be do please help..nd thanks in advance...

 <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

Use getElementsByTagName()

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

Answer 2

Viva la/le jQuery!

$('td').html("<b>Hello table data</b>")

I like the native approach from @gurvinder372, but you can't beat a one-liner from jQuery. However, a more functional native approach might look like:

var paragraphs = document.getElementsByTagName('p');
var helloPee = function (p) {
  p.innerHTML = 'Hello P!'
};
[].forEach.call(paragraphs, helloPee);

Answer 3

You can add jquery code to find the td tag and change the text value you want to. like:

$(function(){
  $('#user-details-table').find(' td').eq(2).replaceWith("Changed Value");
});

Edited: Fiddle

Answer 4

Using document.querySelectorAll - it is native browser function, no library required.

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;
}