从表格单元格创建变量

Question

我需要你的帮助来解决这个问题。 我有一张印刷公司的价格表（链接在上面）。比方说，打印名片。我的目标是创建一个系统，客户可以按价格按下并显示确认弹出窗口中的信息。

例如：我需要500张带有选项＃1的名片。 我按下价格740，弹出窗口显示信息：“您已经订购了 500 名片选项＃1 ，价格 740 。< / p>

手动我可以创建所有变体，如（行-1，单元格-5）+（行-3，单元格-1）+（行-3，单元格-5）但这不是一个选项，即使逻辑是正确的。

我有一个表和弹出窗口已经创建并正常工作。所有价格都是变量，我可以从后端更改它们。我需要帮助组合变量。 如何使用PHP实现我的目标？

Answer 1

你需要JavaScript来做一个弹出窗口，而不是PHP。您可以使用PHP创建一个JavaScript数组，以用于检索值。

在这个例子中，我创建的JavaScript数组（$ JS）与显示的表具有相同的值 在表格中，我为每个单元格添加了按钮（我使用按钮，因为默认样式显示是内联块并且它们的目的是被点击），其中选中时将传递表格的行，列。

$JS = 'var cells[';  // initialize JavaScript array
$ndx = 0;
while ($row = mysqli_fetch_array($results, MYSQL_NUM)){

  echo "
<tr><td><button type="button" onclick="sel($ndx,0)">$row[0]</button></td>
<td><button type="button" onclick="sel($ndx,1)">$row[1]</button></td>
<td><button type="button" onclick="sel($ndx,2)">$row[2]</button></td>
<td><button type="button" onclick="sel($ndx,3)">$row[3]</button></td>
<td><button type="button" onclick="sel($ndx,4)">$row[4]</button></td><tr>";

$JS .= [$ndx[$row[0],$row[1],$row[2],$row[3],$row[4],$row[5]][";
$ndx++;

}
echo '</table>'
$JS = substr($JS,0,-1) . ']]';  // trim the trailing `[` and close the array

echo <<<EOT
<script type="text/javascript">//<![CDATA[
$JS
function sel(r,c){
var selected = cells[r,c];
}

 //]]>
</script>
EOT;

我想在上面展示的主要内容是PHP如何将值传递给JavaScript。这并不是真的需要，因为您可以传递sel($ndx,0,$row[x])中的值，其中x是表格中的列号

但是有一种更好的用户友好方式： 此示例用户通过选中复选框进行选择。表格提交（到相同的脚本）进行确认。

有一个隐藏的输入，其中name = sub和value = 1。所以当点击确认时，可以通过检查$_POST['sub']

的值来检查

$sub = intval($_POST['sub']);
if($sub == 1){
  $selections = array();
  foreach($_POST as $key => $val){
    if(substr($key,0,1) == 'c'){
      $row = intval(substr($key,1,1));
      $col = intval(substr($key,2,1));
      $selections[$row][$col] = $val;
    }
  }
// Confirmation (e.g. create popup box) code goes here  
}

echo '<form action="???.php" method="post"><div><table>';

$ndx = 0;
while ($row = mysqli_fetch_array($results, MYSQL_NUM)){
  echo <<<EOT
<tr><td><div id="d$ndx0"<input type="checkbox" name=\"c$ndx0\" value=\"$row[0]\"/>$row[0]</div></td>
<td><div id="d$ndx1"<input type="checkbox" name=\"c$ndx1\" value=\"$row[1]\"/>$row[1]</div></td>
<td><div id="d$ndx2"<input type="checkbox" name=\"c$ndx2\" value=\"$row[2]\"/>$row[2]</div></td>
<td><div id="d$ndx3"<input type="checkbox" name=\"c$ndx3\" value=\"$row[3]\"/>$row[3]</div></td>
<td><div id="d$ndx4"<input type="checkbox" name=\"c$ndx4\" value=\"$row[4]\"/>$row[4]</div></td>
EOT;
}


echo '</table><input type="submit" value="Confirm Selections"/><input type="hidden" name="sub" value="1"/></div></form>';

设置选中复选框的样式：
在每个复选框中添加一个onclick事件

<input type="checkbox" name=\"c$ndx0\" value=\"$row[0] onclick=\"chk($ndx0)\" \>

然后这个JavaScript将改变div的背景颜色，它封装了复选框，为用户提供了视觉反馈。

init（）函数为每个复选框创建一个数组，每次选中或取消选中复选框时都会删除document.getElementById() 它还根据是否选中复选框为背景着色。

<script type="text/javascript"> //<![CDATA[
var div=0;
var c = new Array;
var d = new Array;
toggle = new Array;
toggle[true] = 'checked="checked"';
toggle[false] = '';
bg = new Array;
bg[true] = '#f00';
bg[false] = '#2985EA';

function chk(id){
  d[id].style.backgroundColor=bg[c[id].checked];
}
function init(){
var checked,did;
var divs = document.getElementsByTagName("div");
  for (div=0; div<divs.length; div++){
    did = divs[div].getAttribute("id");
    if (did != null){
      if (did.substring(0,1) == "d"){
        var i = did.substring(1,3);
        c[i] = document.getElementById('c' + i);
        d[i] = document.getElementById('d' + i);
        checked = c[i].checked;
        d[i].style.backgroundColor=bg[checked];
      }
    }
  }
}
window.onload = init;
//]]>
</script>

然后，当提交表单进行确认时，您可以通过向每个复选框添加$checked来检查所选复选框

<td><div id="d$ndx0"<input type="checkbox" name=\"c$ndx0\" value=\"$row[0]\" $checked[$ndx0] />$row[0]</div></td>

然后将$checked["$val"] = 'checked="checked"';添加到$ _POST循环中

$checked = array();
$sub = intval($_POST['sub'];
if($sub == 1){
  foreach($_POST as $key => $val){
    if(substr($key,0,1) == 'c'){
      $row = intval(substr($key,1,1));
      $col = intval(substr($key,2,1));
      $selections[$row][$col] = $val;
      $checked["$val"] = 'checked="checked"';
    }
  }
}