Question

＆＃13;

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

＆＃13;

#th1{
text-align:left;
}

＆＃13;

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

＆＃13;

我想更改表格中单元格的文本对齐方式。我使用javascript更改文本对齐。当我重新编辑样式代码时，它无法正常工作。

我想将第1个文本对齐方式更改为右侧。但我的代码不起作用。请帮我谢谢你。

Answer 1

首先，您不需要<center>标记。其次，ID是唯一的，因此您需要使用类。最后，由于您已标记JQuery，因此一旦DOM准备就绪，您可以使用css()将CSS分配给元素：

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

Answer 2

这样的事情：

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>

使用类而不是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";
}

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>

javascript dom rewrite不适用于文本对齐

3 个答案: