每次点击更改td背景颜色

时间：2014-12-18 01:36:58

标签： html

这是这笔交易。我有这个代码。很简单，一个用户表 可以点击任何单元格（除了th），它会将它的颜色改为绿色（已完成）。

＆＃13;
＆＃13; 
<html>

<head>
  <title>Coordenada</title>
  <style>
    table,
    th {
      width: 500px;
      text-align: center;
      border-color: #33CCFF;
    }
    .striped {
      background-color: #33CCFF;
    }
    .striped th {
      color: white;
    }
  </style>
</head>

<body style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif">
  <table border="1" cellspacing="1">
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
    </tr>
    <tr class="striped">
      <th>1</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>2</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>3</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>4</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>5</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>6</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>7</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>8</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>9</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>10</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
  </table>
  </div>
  <script>
    function mark(x) {
      x.style.backgroundColor = 'lightgreen';
    }
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我真正想要的是每次点击只有一个单元格保持绿色。

示例：

Click on A1(Change to green) Click on B1(Change to green, A1 return to it's default color) Click on C1(Change to green, B1 return to it's default color)

那样......

2 个答案:

答案 0 :(得分：0)

改为创建一个类（green）。如果点击td循环遍历所有td，请移除课程green（如果存在）并将课程添加到点击的td。

function mark(x) {
  var td = document.getElementsByTagName('td');
  for (i = 0; i < td.length; i++) {
    td[i].classList.remove('green');
  }
  x.classList.add('green')
}
table,
th {
  width: 500px;
  text-align: center;
  border-color: #33CCFF;
}
.striped {
  background-color: #33CCFF;
}
.striped th {
  color: white;
}
.green {
  background-color: lightgreen;
}
<body style="font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif">
  <table border="1" cellspacing="1">
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
    </tr>
    <tr class="striped">
      <th>1</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>2</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>3</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>4</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>5</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>6</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>7</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>8</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr class="striped">
      <th>9</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
    <tr>
      <th>10</th>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
      <td onclick="mark(this)">XXX</td>
    </tr>
  </table>
  </div>

答案 1 :(得分：0)

试试这个

function mark(x){
 var td = document.getElementsByTagName('td');
 for(i=0; i < td.length; i++)
 {
  td[i].style.backgroundColor='';  // set all td bgclor defalut/remove color
 }

  x.style.backgroundColor='lightgreen';

    }

工作演示http://jsfiddle.net/rgLeqgv4/

相关问题
最新问题