HTML表格更改单元格颜色答案

【问题标题】：HTML table change cell colorHTML表格更改单元格颜色
【发布时间】：2019-11-16 22:21:18
【问题描述】：

我有一个 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 ;
 }

只有边框/轮廓会改变颜色。细胞保持白色。感谢任何帮助。提前致谢。

【问题讨论】：

这里混合了 Vanillia JS 和 jQuery，您可以轻松使用 jQuery 并减少此处所需的执行时间。您可以添加完整的 html 代码和示例吗？ “on”类名称是否应用于您单击的 tr 行？
@GrandIQ。我对所有这一切都很陌生，因此代码的混合。但是，我相信应该改变单元格颜色的函数是 Vanilla JS。在这一点上，我并不真正担心执行速度，只是想让功能正常运行。我试图将“on”类应用于行和单元格。结果是一样的。仅单元格轮廓的颜色会发生变化。
所以您手动将“on”类添加到随机行单元格但边框颜色正在改变？请检查您的检查工具，看看是否存在限制您的自定义“on”类的类名冲突。如果您看到多个元素改变了“tr”行单元格的颜色，那么您可能存在样式冲突。
@GrandIQ。会做。但我确定没有类名冲突。
您介意加入聊天室以便我们尝试解决这个问题吗？

标签： javascript html-table background-color tablecell

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

GrandIQ 超越了帮助我解决这个问题的能力。
这就是我们在这里所做的！很高兴我能帮忙:)