は、私は、テーブル内のセルのテキストの整列を変更したい

Question

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

#th1{ 
 
text-align:left; 
 
}

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

揃えテキストのために働いていません。私はテキストを整列するためにJavaScriptを使用しています。私はスタイルコードを編集し直しても機能しません。

私は右にth1テキストの配置を変更したいと思います。しかし、私のコードは動作していません。 お願いします。

Answer 1

何か：

HTML：代わりにIDの

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

使用するクラス。

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

Answer 2

まず、<center>タグは必要ありません。第二に、IDはユニークなので、クラスを使用する必要があります。

/*$(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>

更新： 追加JavaScriptコード過ぎるとコメントし、あなたがJQueryをタグ付けしておりますのでそして最後に、あなたはDOMの準備ができたら、要素のCSSを割り当てるためにcss()を使用することができますJQueryコード。このような

Answer 3

にいます。

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