HTML：跨多個td列跨越表格

我希望能夠在HTML中做這樣的事情。這不是有效的HTML，但目的有：HTML：跨多個td列跨越表格

<table> 
    <tr> 
     <th>Name</th> 
     <th>Favorite Color</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    <tr> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <td><input name="name" value="John"/></td> 
      <td><input name="favorite_color" value="Green"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
      <td><input name="name" value="Sally"/></td> 
      <td><input name="favorite_color" value="Blue"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

很顯然，我不能這樣做，因爲我不能有一個表單標籤立即的<tr>元素內。我能看到的唯一選擇是使用討厭的JavaScript或改變我的程序的行爲。

什麼可能是一個解決方案，可以讓我有一個跨越這樣的多列的形式？

來源

2009-12-01 Ben

一種解決方案是，如果您的多個列實際上是在DIV s而不是表中創建的。

來源

2009-12-01 08:08:12

不，沒有這樣的形式。但是，在許多瀏覽器中，除了在FireFox中動態地創建具有此類結構的DOM元素之外，您的用法與您的預期一致。

也許你可以丟掉<表格>標籤，用javascript做提交; 或者你可以使用<div>做表格佈局的事情。

來源

2009-12-01 08:11:38 deerchao

一個選項是列像這樣colspans結合：

<table> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Favorite Color 
     </th> 
     <th> 
      &nbsp; 
     </th> 
     <th> 
      &nbsp; 
     </th> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <form action="/updatePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
        <input name="name" value="John"/> 
        <input name="favorite_color" value="Green"/> 
        <input type="submit" value="Edit Person"/> 
      </form> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
        <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <form action="/updatePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input name="name" value="Sally"/> 
        <input name="favorite_color" value="Blue"/> 
        <input type="submit" value="Edit Person"/> 
      </form> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
        <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

和樣式表單元素與CSS佈局。或者你可以使用純DIV的佈局。

來源

2009-12-01 08:34:34

一個不錯的選擇，工程IMO（colspans） – HorseloverFat 2013-01-16 18:48:02

使用Div和CSS的無表設計。

EG。

<html> 
<head> 
<style type="text/css"> 
    #wrapper 
    { 
     width: 600px; 
    } 
    #header 
    { 
     width: 600px; 
     height:30px; 
    } 
    #person 
    { 
     clear:both; 
     width:600px;  } 
    .name 
    { 
    clear:both; 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
    .color 
    { 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
    .submit 
    { 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="header"> 
     <div class="name"> 
      <b>Name</b></div> 
     <div class="color"> 
      <b>Favorite Color</b></div> 
    </div> 
    <div id="Person"> 
     <form action="/updatePerson" method="post"> 
     <div class="name"> 
      <input name="name" value="John" /></div> 
     <div class="color"> 
      <input name="favorite_color" value="Green" /></div> 
     <div class="submit"> 
      <input type="submit" value="Edit Person" /></div> 
     </form> 
    </div> 
</div> 
</body> 
</html>

來源

2009-12-01 08:58:36

有一些東西漂浮只是不完成好。一張桌子將保持它的形狀因子，直到苦難結束，作爲一個浮動將快樂下降到下一行。 – Sparatan117 2016-05-20 10:29:02

我會投票討厭的Javascript。它將允許保持原樣。

來源

2009-12-01 09:05:52

你可以

一）以某種形式結合整個表格的行和一個服務器端腳本處理。

或

b）中設置form.action與JavaScript。

來源

2009-12-01 09:22:42

如果您正在使用jQuery，你可以這樣做：

<script type="text/javascript"> 
$(function() { 
    $('.rowForm').submit(function() { 
     //console.log($(':input',$(this).closest('tr'))); 
     //Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit 
     var rowFormContent = $('.rowFormContent',$(this)); 
     rowFormContent.html(''); //Clear out anything that may be in here    
     $(':input',$(this).closest('tr')).clone().appendTo(rowFormContent); 

     return true; 
    }); 
}); 
</script> 

<tr> 
... 
<td> 
    <form action="/cool" method="post" class="rowForm" id="form_row_1"> 
    <div class="rowFormContent" style="display: none;"></div> 
    <input type="submit" value="save"> 
    </form> 
</td> 
</tr>

副作用是，你會得到一個額外的在你提交表單輸入類型，但它會被隱藏，不應該傷害任何東西。這裏的一個微妙的注意是使用'：input'。這是所有輸入類型的jQuery簡寫（select，textarea等）。當心select vals not being copied。你必須做一些欺騙（隱藏的領域）來提交當前選定的克隆的val（）d select。

來源

2011-11-30 22:53:12 rynop

我試過很多方法來解決同一個問題;多個表單在一個單一的HTML表格。 FF &如果放置在a之前或之內，Chrome會自動關閉，或者因爲它不符合語義正確的html。我很欣賞基於佈局的解決方案，但如果您需要堅持使用基於表格的佈局，則需要使用多個表格並在&標籤前後緊挨着&。在我的情況下，我做了一些小的內聯CSS調整，以刪除一個或兩個邊框，然後桌子互相碰撞，就好像它們是行。

例在：http://jsfiddle.net/chopstik/ve9FP/

來源

2012-06-02 22:19:28 chopstik

舊帖子，我知道，但別人看這件事...

這似乎是所有回覆，現在是如此堅定地回答你的問題，他們忘記考慮可能有一種更簡單的方法。

可能存在隱藏在您的問題背後的問題，這是您無法做到的原因。但是，「正確」的HTML有效的方式來做你想做的事情就是將整個表放在一個表單中。爲什麼你需要一個表單進行編輯，另一個表單要刪除？

<form action="/updatePerson" method="post"> 
<table> 
    <thead> 
     <tr><th>Person Name</th><th>Fave Color</th><th>&nbsp;</th><th>&nbsp;</th></tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" size="30" value="John" name="name_1"></td> 
      <td><input name="favorite_color_1" value="Green"/></td> 
      <td><input type="submit" value="Update" name="submit_update_1"></td> 
      <td><input type="submit" value="Delete" name="submit_delete_1"></td> 
     </tr><tr> 
      <td><input type="text" size="30" value="James" name="name_2"></td> 
      <td><input name="favorite_color_2" value="Orange"/></td> 
      <td><input type="submit" value="Update" name="submit_update_2"></td> 
      <td><input type="submit" value="Delete" name="submit_delete_2"></td> 
     </tr> 
    </tbody> 
</table> 
</form>

你需要一點邏輯的在你的ASP/PHP /服務器代碼來計算哪個按鈕名被撞，但你需要的是反正用你建議的解決方案。

來源

2012-07-06 16:12:20 cartbeforehorse

這不是一個解決方案。如果我真的想爲每個用戶提供一張表格，該怎麼辦？也許要合併一個切換按鈕來通過AJAX設置一些標誌。如果我對REST服務做了這些（好吧，你的帖子是從2012年開始的，但對於任何人閱讀），那麼我不能依靠服務器找出哪個按鈕被按下等。 – 2017-03-21 14:57:00

@Balázs從我記憶中，我在2012年沒有意識到這一點，但HTML5允許您將提交按鈕與表單相關聯，而無需提交按鈕必須是表單本身的直接後代。這可以解決原始問題（代碼的維護和直觀理解難度較大）。儘管如此，即使有了HTML5的能力，我也不明白你的反對意見。沒有理由認爲REST服務不夠智能，無法忽視與其操作無關的數據。 – cartbeforehorse 2017-03-21 23:32:18

-3

的路上我一直在做的是：

<tr> 
    <td><form><input name=1></td> 
    <td><input name=2></td> 
    <td><input type=submit></form></td> 
</tr>

附上形式第一個和最後一個TD裏面，所以它在實際的文本區域。很有可能真正舊的瀏覽器會在/td處關閉表單，但現在沒有。

你的榜樣：

<tr> 
    <td> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
    </td> 
    <td> <input name="name" value="John"/></td> 
    <td> <input name="favorite_color" value="Green"/></td> 
    <td> 
      <input type="submit" value="Edit Person"/> 
     </form> 
    </td> 
    <td> 
     <form action="deletePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <input type="submit" value="Delete Person"/> 
     </form> 
    </td> 
</tr>

來源

2014-01-24 20:17:12 Peter

這不是一個有效的html。 – fukanchik 2015-11-10 23:20:13

我遇到了同樣的問題，使用Javascript/jQuery的解決了這個問題。這裏的問題是在一個表形式不能在多個列上伸展，但是，如果所述表格具有ID <form id="unique_per_page"...></form>每個獨立的形式的元素，如輸入的，選擇或甚至textarea的可使用形式屬性<input type="text" name="userName" form="specific_form_id">被分配給該形式

了jQuery/javascript來分配這些東西都需要有一個隨機字符串發生器，這是我從以下Stackoverflow answer

抓起所以，總體來說，代碼將是這樣的：

$("table tr").each(function(i, el){ 
     if(!$(el).find("form[name='updatePerson']").attr("id")) 
     { //if the form does not have id attribute yet, assign a 10-character random string 
      var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2); 
      $(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form 
      $(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line 
      $(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form 
     } 
    });

的HTML你包括的代碼需要適當的名稱更新屬性的形式

<table> 
    <tr> 
     <th>Name</th> 
     <th>Favorite Color</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    <tr> 
     <form action="/updatePerson" name="updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <td><input name="name" value="John"/></td> 
      <td><input name="favorite_color" value="Green"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" name="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <form action="/updatePerson" name="updatePerson" method="post"> 
      <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
      <td><input name="name" value="Sally"/></td> 
      <td><input name="favorite_color" value="Blue"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" name="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

來源

2018-01-25 20:08:44

HTML：跨多個td列跨越表格

回答

相關問題