从表单元格创建变量

Question

​

​

我需要你的帮助来解决这个问题。我有一个表格(链接在顶部)的价格印刷公司。比如说打印名片。我的目标是创建一个系统，客户可以按下一个价格和确认弹出将显示从表的信息。

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

我可以手动创建所有的变体，如(行-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。

$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的背景色，它封装了复选框，向用户提供视觉反馈。

函数为每个复选框创建一个数组，在每次选中或未选中复选框时消除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"';
    }
  }
}