Question

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

只有边框/轮廓线正在改变颜色。细胞保持白色。感谢任何帮助。预先感谢。

Answer 1

问题在于，生成的输入字段与实际单元格重叠，因此，当发生颜色更改时，由于输入字段占用了99％的颜色，因此无法显示整个单元格。通过更改和分配“ on”类以影响输入字段，我们得到了OP期望的最终结果。

Answer 2

一个解决方案，需要相应的解决方案吗？
（更改整个行的颜色_和ES6语法更简单...）

3daK_doWl0g

<iframe width="560" height="315" src="https://www.youtube.com/embed/3daK_doWl0g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

HTML表格更改单元格颜色

2 个答案: