可编辑的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>

，它的发生是因为在'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）。

可编辑的HTML表格单元格编辑

相关推荐