Question

我正在开发一个基于网络的工具来收集数据。输入表单包含排列在表格单元格中的文本输入。我希望单元格的背景颜色随着数字输入表单而改变。

当只有一个输入时，我目前放在一起的代码运行良好。当我向表单添加输入时，唯一更改的单元格是最后一个。我怀疑它与javascript函数中的单元格引用有关。

<?php
$LSL = 2;
$LCL = 4;
$NOM = 6;
$UCL = 8;
$USL = 10;


function makeCell($InputID, $LSL, $LCL, $NOM, $UCL, $USL) {
    $Cell = "C".$InputID;

    print "<td id=\"$Cell\">\n";
    print "<input id=\"$InputID\" name=\"".$InputID."23\" onchange=\"jsonchange('$Cell')\"/>\n";
    print "<script>\n"; 

    print "function jsonchange(id) {\n";
    print "if (document.getElementById(\"$InputID\").value <= $LCL) { document.getElementById(\"$Cell\").style.backgroundColor = \"yellow\"; }\n";
    print "if (document.getElementById(\"$InputID\").value <= $LSL) { document.getElementById(\"$Cell\").style.backgroundColor = \"red\"; }\n";
    print "if (document.getElementById(\"$InputID\").value >= $UCL) { document.getElementById(\"$Cell\").style.backgroundColor = \"yellow\"; }\n";
    print "if (document.getElementById(\"$InputID\").value >= $USL) { document.getElementById(\"$Cell\").style.backgroundColor = \"red\"; }\n";
    print "if (document.getElementById(\"$InputID\").value > $LCL && document.getElementById(\"$InputID\").value < $UCL) { document.getElementById(\"$Cell\").style.backgroundColor = \"white\"; }\n";
    print "}\n";
    print "</script>\n";
    print "</td>\n";
}


print "<table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" style=\"width: 99%;\">\n";
print "<tr>\n";

makeCell(1, $LSL, $LCL, $NOM, $UCL, $USL);
makeCell(2, $LSL, $LCL, $NOM, $UCL, $USL);
makeCell(3, $LSL, $LCL, $NOM, $UCL, $USL);
makeCell(4, $LSL, $LCL, $NOM, $UCL, $USL);

print "</tr>\n";
print "</table>\n";
?>

Answer 1

您可能希望将一个侦听器分配给所有输入：

window.addEventListener("input",function(e){
 var val = e.target.value;
 if(val < 15){
   e.target.style.color = "red";
 }else{
   e.target.style.color = "blue";
});

您当前的代码无效，因为所有函数都具有名称。这意味着他们互相覆盖。

根据表单输入更改单元格背景（PHP和JS）

1 个答案: