HTML таблица меняет цвет ячейки - PullRequest
Новая
       68

HTML таблица меняет цвет ячейки

1 голос
/ 06 июля 2019

У меня есть таблица HTML, в которую я добавляю строки при нажатии кнопки.Эта часть работает нормально: 

function ic_add_supplier_line(){
   var table = document.getElementById("ic_current_pricing");
   var count = $('#ic_current_pricing tr').length;
   var row = table.insertRow(count); 
  for (i = 0; i < 8; i++) {
     var cell = row.insertCell(i); 
     var cell_id = "ic_q_" + String(i) +"_" + String(count)
     cell.innerHTML = "<input id=" + cell_id + " style='width:100%;' type='text' ondblclick='select_supplier(this.id)' >" 
  } 
}

Когда дважды щелкают ячейку, я хочу, чтобы цвет фона ячейки изменился.

  function select_supplier(elm_id) {
     var cur_row = elm_id.slice(-1)
     var table = document.getElementById("ic_current_pricing");
     var rows = table.getElementsByTagName("tr") ;
     for (var i=0; i<rows.length; i++) {
        if (i== cur_row){
           for (j =0; j<8; j++){
               rows[i].cells[j].className="on"
           }    
        }else{
           for (j =0; j<8; j++){
           rows[i].cells[j].className=""        
        }
     }
   }
}

и CSS 

.on{
   background-color:green ;
 }

Только граница / контур изменяют цвет.Клетка остается белой.Ценю любую помощь.Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 07 июля 2019

решение, ожидаете соответствующего?
(проще изменить цвет всей строки _ и синтаксис ES6 ...) 

const ic_Table = document.querySelector("#ic_current_pricing tbody")

function ic_add_supplier_line()
  {
  let count = ic_Table.rows.length
   , newRow = ic_Table.insertRow( count )
  for (let i=0; i < 4; i++)   // changed 8 to 4 
    {
    newRow
      .insertCell(i)
      .innerHTML = `<input id="ic_${i}_${count}" type="text" >` 
    } 
  }

ic_Table.ondblclick=e=>  // event delegation for double click for every <input
  {
  if(!e.target.tagName.toLowerCase=='input') return
  let TR_parent = e.target.parentNode.parentNode
  ic_Table.querySelectorAll('tr').forEach(xTR=> xTR.className = (xTR===TR_parent) ? 'on' : '' )
  }

R_plus.onclick = ic_add_supplier_line
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .5em 0; height: 1em; width:110px; text-align:center; }

td input[type=text] { width:80px !important  }

.on { background-color:green ; }
<button id="R_plus">Add Row</button>

<table id="ic_current_pricing">
  <tbody>
  </tbody>
</table>
1 голос
/ 07 июля 2019

Проблема заключалась в том, что сгенерированное поле ввода перекрывало фактическую ячейку, поэтому, когда происходило изменение цвета, оно не отображало всю ячейку, так как поле ввода занимало 99% от нее.Изменяя и назначая класс «on» для воздействия на поля ввода, мы получили конечный результат, который желал OP.

...