Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 65
  • Last Modified:

After replacing cell text using JavaScript, text is no longer centered

I have a table that contains a cell like this:

<td class="catop"><center>2406.31</td>

Open in new window


The "2406.31" is displayed centered in the cell.

I have the following JS which changes that value when a drop down option in the same row is selected:
$(".rank").change(function() {
    var rankop = this.value; // get Rank value
    var $catrow = $(this).closest("tr");    // Find the row
    var $catop1 = $catrow.find(".catop").text(); // Find cat Op
	var $catop = (rankop * $catop1); // Multiply ranking x op for new op 
	$catop =$catop.toFixed(2);    // format to 2 decimal points
	$catrow.find(".catop").text($catop);  // change text of catop cell to new op

});
	

Open in new window


The script works fine but when the cell text is replaced with the new number is is aligned left instead of centered. Is there a way for me to keep the cell text centered after being replaced?
0
dannyg280
Asked:
dannyg280
1 Solution
 
Chris StanyonCommented:
When you replace the text, you're overwriting the <center> tag, so you will need to include that in the new text. Something like this:

$catop = $('<center>').text($catop.toFixed(2));
$catrow.find(".catop").html($catop);

Open in new window


Alternatively, use CSS on the catop class
1
 
ste5anSenior DeveloperCommented:
Use CSS text-align.
0
 
dannyg280Author Commented:
Thank you. I went with CSS to keep all the headers and cells centered.

td,th {
  text-align: center;
}
0
 
Julian HansenCommented:
1. <center> has been deprecated in HTML5
2. your code does not have a closing </center>
<td class="catop"><center>2406.31</td>

Open in new window

3. There are two ways of doing this

<td class="catop"><center><span>2406.31</span></center></td>

Open in new window

Target the <span> instead of the <td>. I provide this for interest - in case you have a similar situation. In this case the correct method is the one suggested by Ste5an [EDIT: and Chris] - use CSS
CSS
...
td.catop {
  text-align: center;
}
...

Open in new window

HTML
...
<td>2406.31</td>
...

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now