如何更新HTML中特定表格行的數據？

Question

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

因此，似乎當我提交提交每個輸入數據創建，我怎麼能只發送一個特定的行？謝謝

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

Answer 2

這是不可能的。表單發送一切。你必須使用多種形式才能做到這一點。你能解釋一下爲什麼你想分別發送每一行。讓我們知道完整的問題，以便我們可以爲您提供更好的解決方案:)

Answer 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

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

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

... 

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