how to change value of all td tag in html via javascript

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>

you can do this with each loop(), here you mention that you have two tables, so go with table id, — Neeraj Sharma
– Neeraj Sharma, Commented Dec 17, 2015 at 7:08

gurvinder372 · Accepted Answer · 2015-12-17 07:07:02Z

3

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

answered Dec 17, 2015 at 7:07

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David P. Over a year ago

You have to care about the HTMLCollection returned from document.getElementsByTagName() . A HTMLCollection is live, so it can be possible that the value of allTDs can change while iterating through the loop and manipulating the DOM

singe3 Over a year ago

@OdaYukimura How is that ? Javascript is single threaded, there is no race condition.

David P. Over a year ago

Correct my when I´m talking nonsense. But if you run something like this

a = document.getElementsByTagName("div"); for(var i= 0;i < a.length; i++){  document.body.innerHTML = ""; console.log(i)  };

The loop will run exactly one time. Without document.body.innerHTML = ""; it will runs for every div in the page. But this is no answer for your question just a code snippet :/

Adrian Lynch · Accepted Answer · 2015-12-17 07:28:37Z

0

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

edited Dec 17, 2015 at 7:28

answered Dec 17, 2015 at 7:19

Adrian Lynch

8,5442 gold badges36 silver badges41 bronze badges

Comments

shishir · Accepted Answer · 2015-12-17 07:34:52Z

0

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

answered Dec 17, 2015 at 7:34

shishir

8373 gold badges11 silver badges27 bronze badges

Comments

Ilya Novojilov · Accepted Answer · 2015-12-17 07:49:31Z

0

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

answered Dec 17, 2015 at 7:49

Ilya Novojilov

8898 silver badges12 bronze badges

Collectives™ on Stack Overflow

how to change value of all td tag in html via javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related