2013-10-20 16 views
0

我有這個用戶填寫的輸入字段表。正如您所看到的,有兩對字段,四列對齊,最少五行,並且可以根據需要動態添加更多行。我一直在努力如何命名輸入字段,以便在提交表單時可以將它們正確地分組在一起。我嘗試過不同的行等,但沒有一個工作正常。我希望每一對排在一起,即如何正確使用此表格數據並將字段分組?

[0] -> drum - value 
[0] -> size - value 
[1] -> drum - value 
[1] -> size - value 

下面是我現在擁有的表格。非常感謝您的幫助,我真的很感激!

<table id="drumInformation"> 
     <tr> 
      <th colspan="9"><p>D R U M I N F O R M A T I O N – Drum Number(s)/Liter(s) or Gallon(s) Used</p> 

       <p> If some or all of your drum numbers fall in consecutive order, please feel free to use the 
        "series" method shown below to avoid typing each drum number individually and to save you valuable time.</p> 

       <p>Example:<br/> 
        10001, 10002, 10003, 10004, 10005, 10006 or 10001 - 10006</p> 
      </th> 
     </tr> 
     <tr class="labelRow"> 
      <td class="label"> 
       <label>Drum No.</label> 
      </td> 
      <td class="label"> 
       <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label> 
      </td> 
      <td class="label"> 
       <label>Drum No.</label> 
      </td> 
      <td class="label"> 
       <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label> 
      </td> 
      <td class="label"> 
       <label>Drum No.</label> 
      </td> 
      <td class="label"> 
       <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label> 
      </td> 
      <td class="label"> 
       <label>Drum No.</label> 
      </td> 
      <td class="label"> 
       <label><span class="euro">Liters</span><span class="domestic">Gallons</span></label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td class="remove"></td> 
     </tr> 
     <tr> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td class="remove"></td> 
     </tr> 
     <tr> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td class="remove"></td> 
     </tr> 
     <tr> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td class="remove"></td> 
     </tr> 
     <tr> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td> 
       <input name="row[][drumNumber][]"> 
      </td> 
      <td> 
       <input name="row[][gallons][]"> 
      </td> 
      <td class="remove"><img src="/forms/assets/img/Plus-32.png" class="addRow"></td> 
     </tr> 

    </table> 
+0

爲什麼不把數組編號放在名稱中?這可以使用JavaScript來遞增和遞減。 – hcoat

回答

0

我發現作品改變表格行看起來像這樣的解決方案:

<tr> 
     <td> 
      <input name="group[8][drumNumber]"> 
     </td> 
     <td> 
      <input name="group[8][gallons]"> 
     </td> 
     <td> 
      <input name="group[9][drumNumber]"> 
     </td> 
     <td> 
      <input name="group[9][gallons]"> 
     </td> 
     <td> 
      <input name="group[10][drumNumber]"> 
     </td> 
     <td> 
      <input name="group[10][gallons]"> 
     </td> 
     <td> 
      <input name="group[11][drumNumber]"> 
     </td> 
     <td> 
      <input name="group[11][gallons]"> 
     </td> 
     <td class="remove"></td> 
    </tr> 

有可能是一個更清潔的解決方案,但是這一個工程。我不知道爲什麼我在前面插入任何行。