HTML table 更改单元格颜色

Question

我有一个 HTML table，我在单击按钮时向其中添加行。那部分工作正常：

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

只有border/outline在变色。细胞保持白色。感谢任何帮助。提前致谢。

Answer 1

问题是生成的输入字段与实际单元格重叠，因此当颜色发生变化时，它不会显示整个单元格，因为输入字段占据了 99%。通过更改和分配 "on" class 来影响输入字段，我们得到了 OP 所需的最终结果。

Answer 2

一个解决方案，期待相应的？
（更改整行颜色 _ 和 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>

HTML table 更改单元格颜色

HTML table change cell color

javascript

html-table

background-color

tablecell