javascript dom rewrite is not working for text align

Question

function testit(){
document.getElementById("th1").style.textAlign = "right";
}

#th1{
text-align:left;
}

<table>
   <tr><center><th colspan="2" id="th1">EmergencyImportantContactsnumbers</th><center></tr>
   <tr><th colspan="2" id="th1" >Emergency.SQUCampus</tr></tr>
   <tr><th>Emergency.m1</th><th id="th1" >Emergency.m2</th><tr>
   <tr><td>Emergency.m3</td><td id="th1" >Emergency.m4</td></tr>
   <tr><td>Emergency.m5</td><td id="th1" >Emergency.m6</td></tr>
   
   </table>
<button onclick="testit();">Text Script</button>

I want to change the text align of cell in table. i have used javascript for changing the text align. When i re edit the style code it is not working.

I want to change th1 text alignment to right. But my code is not working. Please help me thank u.

Make ID unique and `th` should be immediate child of `tr` instead of ` — Abhishek Pandey, Aug 01 '17 at 08:51
Relevant question: [What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Andreas, Aug 01 '17 at 08:51
So, if you comment your CSS code, its working. Which means, CSS is overriding your JS code. May be, it could be the order in which CSS and JS are loaded?? — Milan Chheda, Aug 01 '17 at 08:57
You do not need a tag there. Also noticed your ID reference is duplicated. — M Thomas, Aug 01 '17 at 08:57

Milan Chheda · Answer 1 · 2017-08-01T09:09:33.390

First, you don't need to <center> tag. Secondly, IDs are unique and hence you need to use class. And lastly, since you have tagged JQuery, you can use css() to assign the CSS to the elements once the DOM is ready:

/*$(document).ready(function() {
  $(".th1").css({
    'text-align': 'right'
  });
});
*/

var element = document.getElementsByClassName("th1");
for (var i = 0; i < element.length; i++) {
    element[i].style.textAlign = 'right';
}

.th1 {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th colspan="2" class="th1">EmergencyImportantContactsnumbers</th>
  </tr>
  <tr>
    <th colspan="2" class="th1">Emergency.SQUCampus</th>
  </tr>
  <tr>
    <th>Emergency.m1</th>
    <th id="th1">Emergency.m2</th>
    <tr>
      <tr>
        <td>Emergency.m3</td>
        <td id="th1">Emergency.m4</td>
      </tr>
      <tr>
        <td>Emergency.m5</td>
        <td id="th1">Emergency.m6</td>
      </tr>

</table>

Update: Added JavaScript code too and commented JQuery code.

You want it in JavaScript? Why have you tagged JQuery? – Milan Chheda Aug 01 '17 at 09:07 — Milan Chheda, Aug 01 '17 at 09:07

score 1 · Accepted Answer · answered Aug 01 '17 at 09:04

Something like this:

HTML:

<table>
         <tr><center><th colspan="2" class="th1">EmergencyImportantContactsnumbers</th><center></tr>
         <tr><th colspan="2" class="th1" >Emergency.SQUCampus</tr></tr>
         <tr><th>Emergency.m1</th><th class="th1" >Emergency.m2</th><tr>
         <tr><td>Emergency.m3</td><td class="th1" >Emergency.m4</td></tr>
         <tr><td>Emergency.m5</td><td class="th1" >Emergency.m6</td></tr> 
</table>

Use classes instead of id.

CSS:

table{
  width: 400px;
}
.th1{
  text-align:left;
  padding: 3px;
  border: 1px solid black;
}

JS:

var th1 = document.getElementsByClassName("th1");
for (var i = 0; i < th1.length; i += 1) {
    th1[i].style.textAlign = "right";
}

score 0 · Answer 3 · answered Aug 01 '17 at 09:27

Here you are.

 <style>
    #th1{
    text-align:left;
    }
    .th2{
    text-align:right !important;

    }
    </style>

    <table>
         <tr><center><th colspan="2" id="th1">EmergencyImportantContactsnumbers</th><center></tr>
         <tr><th colspan="2" id="th1" >Emergency.SQUCampus</tr></tr>
         <tr><th>Emergency.m1</th><th id="th1" >Emergency.m2</th><tr>
         <tr><td>Emergency.m3</td><td id="th1" >Emergency.m4</td></tr>
         <tr><td>Emergency.m5</td><td id="th1" >Emergency.m6</td></tr>   
     </table>
     <script>
       $(document).ready(function() {

       $('table #th1 ').addClass("th2");
      });
     </script>

javascript dom rewrite is not working for text align

3 Answers3