2013-04-15 57 views
0

我想創建一個網站的JavaScript計算網上表格。在線報價表 - Wordpress

我的第一步是在excel中創建表格/表格。然後我使用在線服務將表格轉換爲html。我現在已經生成了html代碼,這很好,但是我發現這些字段不是可編輯的。我試圖在轉換之前刪除電子表格中的「示例」數據,但這些字段仍然不可編輯?

任何意見將不勝感激。謝謝

<style type="text/css"> 
    table.tableizer-table { 
    border: 1px solid #CCC; font-family: <?php echo $tableFont ?>; 
    font-size: 12px; 
} 
.tableizer-table td { 
    padding: 4px; 
    margin: 3px; 
    border: 1px solid #ccc; 
} 
.tableizer-table th { 
    background-color: #104E8B; 
    color: #FFF; 
    font-weight: bold; 
} 
</style><table class="tableizer-table"> 
<tr class="tableizer-firstrow"><th>Date</th><th>Amount of Delegates ½ Day Conference @ R 240 pp</th><th>Amount of Delegates Full Day Conference @ R 260 pp</th><th>Menu No</th><th>Price pp for Menu  (1-7: R70, 8-10 R85, 11: R105, 12: R85)</th><th>Total persons for Meals </th><th>Amount of Single Rooms @ R 480 pp</th><th>Amount of Double Rooms @ R 720 pp</th><th>Total for the day</th></tr> 
<tr><td>4/14/2013</td><td>2</td><td>4</td><td>5</td><td>70</td><td>6</td><td>3</td><td>3</td><td>R 5,540.00</td></tr> 
<tr><td>4/15/2013</td><td>1</td><td>5</td><td>8</td><td>85</td><td>6</td><td>3</td><td>3</td><td>R 5,650.00</td></tr> 
<tr><td>4/16/2013</td><td>0</td><td>6</td><td>11</td><td>105</td><td>6</td><td>3</td><td>3</td><td>R 5,790.00</td></tr> 
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr><td>Grand Total for the conference</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>R 16,980.00</td></tr> 
</table> 
+0

在瀏覽器中打開時,他們沒有編輯? – trajce

+0

@trajce - 不,這些字段都不是。謝謝您的回答。我現在瞭解輸入字段:)我如何使用輸入字段,但仍然保持表在colums中對齊? – user1426583

+1

檢查下面的示例,表格中包含行''和列'​​'(本例中爲2)。 1爲屬性名稱,1爲輸入值。如果你想達到和我一樣的效果,只需重複「 ......」這一行即可。請記住更改每個輸入的「id」,以便它們具有唯一的ID。 – trajce

回答

1

我不明白你的意思是不可編輯的,但我想你是說他們有靜態數據。如果是這樣的話,那麼你需要插入<input type="text" />元素。

我提供了一個樣本jsfiddle.net/trajce/6jAAU
下面是示例HTML:

<table> 
<tr> 
    <td> 
     Name: 
    </td> 
    <td> 
     <input tyle="text" id="name"/> 
    </td> 
</tr> 
    <tr> 
    <td> 
     Surname: 
    </td> 
    <td> 
     <input tyle="text" id="surname"/> 
    </td> 
</tr> 
</table>