Добавление addEventListener в ячейку таблицы, по которой щелкнули, для изменения цвета - PullRequest
Новая
       2

Добавление addEventListener в ячейку таблицы, по которой щелкнули, для изменения цвета

1 голос
/ 18 сентября 2010

Я создаю динамическую таблицу из трех столбцов и нескольких строк. Я хочу иметь возможность щелкнуть последние ячейки в каждой строке и выбрать строку, показывающую определенный цвет. Я пытаюсь сделать это, а также убедиться, что если другая ячейка уже выбрана, она отменит выбор. У меня есть несколько вопросов, не уверен, что именно делать. Я могу создать предупреждающее сообщение onclick, которое работает, но безуспешно с цветом bg. Любые предложения полезны. Функция createCell должна быть там, где это решено. 

<html>
<br/><br/></p>
<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
 <tr>
<td>Name</td>
<td>Age</td>
<td>Sex</td>
</tr>

 </table>
<p></center></p>
<script type="text/javascript" language="javascript">

 function appendRow(){


var names = ["Paul", "Mike", "Linda"];
var ages = ["16", "23", "44"];
var male_female = ["M", "M", "F"];
var tbl = document.getElementById('my_table'); // table reference
// append table row
var id;
var z=1;
for(k=0;k<names.length;k++){    
var row = tbl.insertRow(tbl.rows.length);


    var j = tbl.rows.length - 2;
    for (var i=0;i<tbl.rows[0].cells.length;i++) {
        id=z++;
          var cell_text = '';
          if (i == 0) {
                 cell_text = names[j];
          } else if (i == 1) {
                 cell_text = ages[j];
          } else if (i == 2) {
                 cell_text = male_female[j];
          }
        createCell(id, row.insertCell(i), cell_text, 'row');

    }


  }


}

function createCell(id, cell, text, style){

var div = document.createElement('div'); // create DIV element

var txt = document.createTextNode(text); // create text node
if(id % 3 == 0)
{
          cell.setAttribute('onclick', 'alert("hello")');    //for testing purposes
      cell.addEventListener("click", clickCell, false);
}
div.appendChild(txt);                    // append text node to the DIV
div.setAttribute('class', style);        // set DIV class attribute
div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
cell.appendChild(div);            // append DIV to the table cell
}

  function clickCell()
 {
if(e)
  e.setAttribute("bgColor","purple");

 if(e != this){
    e = this;
    e.setAttribute("bgColor","blue");
 }else{
   e = null;
  }
 }      





 </script>
<BODY onload="appendRow()">

<style>
table#my_table{border-collapse:collapse;}
 table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font-size:10pt;text-align:center;padding:0;}
  .append_row{background-color:#FFD6D6;border:1px #ccc solid;}
 </style>
 </body>
 </html>

Ответы [ 3 ]

4 голосов
/ 18 сентября 2010

Измените метод clickCell на: 

function clickCell(e) {
    // clear the background of all rows
    var rows = document.getElementById('my_table').rows;
    for(var i = 0; i < rows.length; i++) {
        rows[i].style.backgroundColor = '';
    }
    // set background of clicked row
    this.style.backgroundColor = 'purple';
}

См. пример .

2 голосов
/ 18 сентября 2010

В createCell измените cell.setAttribute('onclick', 'alert("hello")'); на cell.setAttribute('onclick', 'alert("hello");this.parentNode.setAttribute("bgcolor", "purple")');

0 голосов
/ 18 сентября 2010

Понял, что если я установлю функцию clickcell на следующую, она очистит все ячейки, которые окрашены.Я думал, что могу вызвать «this.style.backgroundColor», чтобы изменить цвет ячейки, а затем очистить ячейку с «row.style.backgroundColor».

function clickCell(e) {
var tr = document.getElementById('my_table').rows;

for(i=0;i<tr.length;i++)
{
    for(k=0;k<tr[i].cells.length;k++)
    {
        tr[i].cells[k].style.backgroundColor = "";
    }
}   
this.style.backgroundColor = "blue";
}
...