【问题标题】:Output Dynamic Table Data输出动态表数据
【发布时间】:2018-07-05 05:22:04
【问题描述】:

我正在为我的 Intranet 创建一个发票网站。

我有以下代码用于在 html 中创建一个动态表行,该行生成的行最多为发票所需的行数。

 function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[1].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
            }
        }
    }

通过表单插入数据后,想通过php echo输出表格数据。但我不知道如何从动态表中输出每一行,因为现在它只给了我最后一行。

我想按以下方式输出数据:

echo $var_name."<br>";

现在表格中的每一行都有 5 个变量,但它们只给我最新的行输入(逻辑)

【问题讨论】:

  • 表单元素的 HTML 名称是什么?

标签: javascript php html


【解决方案1】:

您需要提供以[] 结尾的表单字段名称。提交表单时,PHP 会将名称为name[] 的所有字段组合到$_POST['name'] 中的一个数组中。然后,您可以遍历这些数组以获取表单的所有行。

表单应该类似于:

<form method="post" action="your URL">
  <table>
    <tr><td><input type="text" name="somename[]"></td>
        <td><select name="somemenu[]">
              <option value="">Please choose</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              ...
            </select></td>
    </tr>
  </table>
</form>

那么你的 PHP 就可以了:

foreach (array_keys($_POST['somename']) as $key) {
  // Do something with $_POST['somename'][$key] and $_POST['somemenu'][$key]
}

【讨论】:

  • 这是在添加新行时在 javascript 中完成,还是在行所在的 html 中完成?您可以发布带有示例 javascript 的示例表单吗?
  • 添加了一个简单的例子。根本不需要更改 JS。
猜你喜欢
  • 1970-01-01
  • 2015-05-13
  • 2021-10-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-28
  • 1970-01-01
相关资源
最近更新 更多