如何更新 HTML 中特定表格行中的数据？答案

【问题标题】：How to update the data in particular table row in HTML?如何更新 HTML 中特定表格行中的数据？
【发布时间】：2014-08-09 12:07:49
【问题描述】：

由于<form> 不能在<tr> 内，我无法为每一行分配表格。最后我创建了一个这样的

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

所以，似乎当我提交数据时它会提交每个输入，我怎样才能只发送特定的行？谢谢

【问题讨论】：

你不能，表单发送一切
您可以使用单独的表格

标签： php jquery html forms

【解决方案1】：

由于表单发送所有值（因为您使用<button>），您可以为每一行分配一个对应于该行的键。然后在文本框中使用它。注意：文本框值必须是数组结构，以便可以使用来自提交更新的特定键（有点像过滤）。考虑这个例子：

<?php

if(isset($_POST['update'])) {
    $product_key = $_POST['update'];
    $product_name = $_POST['my_product_name'][$product_key];
    echo $product_name;
    // this should correspond to that same textbox row that you selected
}

?>

<form method="POST" action="">
    <table>
        <tr>
            <td><input type="text" name="my_product_name[1]"></td>
            <td><button name="update" type="submit" value="1">Update</button></td>
        </tr>
        <tr>
            <td><input type="text" name="my_product_name[2]"></td>
            <td><button name="update" type="submit" value="2">Update</button></td>
        </tr>
    </table>
</form>

【讨论】：

【解决方案2】：

这是不可能的。表单发送其中的所有内容。您必须使用多种形式才能做到这一点。您能解释一下为什么要分别发送每一行吗？让我们知道完整的问题，以便我们为您提供更好的解决方案:)

【讨论】：

【解决方案3】：

收集值，然后在提交时将其推送到表单中。

<script>
    function dosubmit(e){
        var value = $(this).parents('tr').find('input.some').val();
        $(this).parents('tr').find('input.my_product_name').val(value);
    }
</script>

<table>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
    <tr>
        <td><input name="some"/></td>
        <td>
            <form onsubmit="dosubmit(event)">
                <input type="hidden" name="my_product_name"/>
                <input type="submit" value="Submit">
            </form>
        </td>
    </tr>
</table>

我不知道 jsbin 会有多好，但是here it is

【讨论】：

【解决方案4】：

您必须使用单独的表格。为避免此问题，您可以尝试使用 div 并使用 css 设置样式。

<div class="big-wrapper">
<div class="form-wrapper">
    <form id="first-input">
        <input name="my_product_name">
        <button type="submit">Click Here To Submit Form 1</button>
    </form>
</div>
<div class="form-wrapper">
    <form id="second-input">
        <input name="my_product_name">
        <button type="submit">Click Here To Submit Form 2</button>
    </form>
</div>

上述代码示例（无需额外的 css）：http://postimg.org/image/p0olzl933/

【讨论】：

【解决方案5】：

一种方法是使用表单标签来包装表格，每个表格有效地变成一行。

老实说，有很多方法可以做到这一点......你可以使用 Javascript 来处理它，就像我在下面那样，或者使用服务器端脚本生成一个特殊的表格并将其写入页面。您可以使用 ajax 调用将更改的值发送到 Web 服务等。

希望有所帮助。

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

<form>
<table>
<tr><td><input name="my_product_name"></td><td><button type="submit"></td></tr>
</table>
</form>

...

【讨论】：

【解决方案6】：

您可以通过设置隐藏参数来提交表单中的值，如下所示：

HTML：

<form action="" id="formId">
 <input type="hidden" name="product_name" id="hiddenValue" />
</form>
<table>
  <tr>
     <td><input name="my_product_name"></td>
     <td><button type="submit" onclick="submitForm(this)"></td>
  </tr>
  <tr>
     <td><input name="my_product_name"></td>
     <td><button type="submit" onclick="submitForm(this)"></td>
  </tr>
</table>

脚本：

<script>
    function submitForm(id){
        var input = id.parentElement.parentElement.getElementsByTagName("input")[0].value;
        //Retrieving value of specific rows
        document.getElementById("hiddenValue").value = input;
        //Submits the form with given id.
        document.getElementById("formId").submit();
    }
</script>

【讨论】：