可編輯的HTML表格單元格編輯

當我試圖實現與使用方法類似this可編輯的單元格的表，不調整。該單元格包含一個標籤或跨度以及一個輸入框，我使用一個標誌來決定通過ng-show顯示哪一個。但是當標籤變得可見時，單元格會垂直展開。這個演示很微妙，但你可以看到第二行略微下移。可編輯的HTML表格單元格編輯

我怎樣才能使它保持相同的大小，就像this例如可編輯的錶行？我已經看過這個例子中的樣式，但我無法弄清楚它是如何完成的。非編輯模式跨度似乎有尺寸「自動」，但輸入形式出現時，它具有明確的寬度/高度 - 他們碰巧是完全一樣的。

PS。我接受這樣的觀點，即我做這件事的方式並不是最優的，在這種情況下，任何替代建議都會很棒。

<div ng-controller="MyCtrl"> 

    <table> 
    <tr> 
     <td> 
     <label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label> 
     <input ng-blur="editing=false" ng-show="editing" ng-model="mytext" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label>some more text</label> 
     </td> 
    </tr> 
    </table> 
</div>

來源

2017-02-25 John B

，它的發生是因爲在'input'邊界。 [下面是一個例子]標籤補償它用少量的CSS（http://jsfiddle.net/zwpesm4m/4/）。另外，在您提供的另一個示例中，該元素始終保持一個跨度，並且不會切換到輸入，因此不會反彈。 –

謝謝@德魯。但我仍然不明白其他示例（x-editable）是如何工作的。它看起來像當你點擊編輯按鈕時，他們實際上是將輸入元素添加到該點的DOM。在我的應用我試圖用一個跨度爲顯示文本和引導「的形式控制」輸入就是這樣的例子（除了我沒有將它添加上的蒼蠅，只是用NG-顯示）。但是當我展示它時，輸入使得單元格更大。如果x-editable有一些造型技巧可以阻止它發生，我看不到它是什麼。也許它與他們將其添加到DOM的事實有關... –

我發現了，爲什麼細胞不會在我鏈接到我的問題的xeditable例如擴大 - 這是因爲有一個明確的大小在CSS設置：我沒有」

div[ng-controller] table tr td { 
    height: 45px; 
    /*text-align: center;*/ 
    vertical-align: middle; 
}

起初找到這個，因爲我正在查看包附帶的css文件，而且我找不到任何可以解釋它的規則。但它實際上在演示頁面的另一個css文件中定義（https://vitalets.github.io/angular-xeditable/docs/css/docs.css）。

來源

2017-02-27 18:59:51

可編輯的HTML表格單元格編輯

回答

相關問題