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

Since the <form> can not inside <tr>, I can not assign the form for each row. And at the end I have create a from like this

<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>

So, it seems when I submit data it submit every input, how can I send only a specific row? Thanks

Since forms send all the values, (since your using <button>), you could assign each row a key that corresponds to that row. Then use that in the textbox. Note: Textbox values must be an array structure, so that particular key from the submit update can be used (kinda like filtering). Consider this example:

<?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>

This is not possible. A form sends everything in it. You have to use multiple forms in order to do that. Can you explain why you want to send each row separately. Let us know the complete problem so we can provide you much better solution :)

Collect the value then push it into the form on submit.

<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>

I don't know how much good a jsbin will be, but here it is

You must use separate forms. To avoid this issue, you could try using div's and style them with 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>

Example of above code (with no additional css): http://postimg.org/image/p0olzl933/

One method would be to have form tags that wrap tables and each table effectively becomes a row.

Honestly, there are a lot of ways to do this... you could handle it using Javascript with something like I have below or generating a special table with a server-side script and writing that to the page. You could use ajax calls to send the values that change to a web service, etc.

Hope that thelps.

<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>

...

You can submit the value in form by setting in hidden parameter as follows:

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:

<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>