如何制作部分无法编辑的表格单元格? [英] How to make a partially un-editable table cell?

问题描述

这可能是一个奇怪的问题，但是是否可以构建部分可编辑但部分不可编辑的表单元呢?我的意思是，我想使用JavaScript通过在JavaScript中设置 .contentEditable = true 来使大部分单元格可编辑(已完成).但是，我也希望一部分(最好在右侧)是不能被覆盖或编辑的文本.

This might be kind of a weird question, but is it possible to build table cells that are partially editable, but also partially un-editable? By this I mean, I want to use JavaScript to make a majority of the cell editable by setting .contentEditable = true in JavaScript (already done). However, I also want a portion (preferably on the right side) to be text that cannot be written over or edited.

我要在此处进行的操作是使大部分表格单元都可编辑以放入原始数据(即数字).但是要为单元保留一个停滞部分，以使该单元实际上不会被当作输入(它更像是装饰).

What I'm trying to do here is make most of the table cell editable to put in raw data, i.e. numbers. But to leave an stagnate section with a unit, so that the unit doesn't actually get taken as input (it's more just like decoration).

如果有帮助，我已经绘制出我所想像的模型:

I've drawn a mock-up of what I'm imagining, if this helps:

到目前为止，我已经尝试在< td> 之后的初始输入之后添加< input> 元素，然后设置输入样式以设置点事件:无.但这看起来不太好，最终在内容可编辑单元中创建了输入表单，这并不是我真正想要的，最终看起来像这样:

So far, I've tried adding a <input> element after the initial input following <td>, then style the input to set point-events: none. But this does not look good and ends up creating an input form inside of a content editable cell, which isn't really what I want, and ends up looking like this:

我认为它必须使用一些CSS覆盖层，而不是与表格HTML分开.无论哪种方式，我将如何处理?

I think it would have to use some CSS overlay and not actually be apart of the table HTML. Either way, how would I go about this?

推荐答案

您可以只使用两个 span 元素，使其中一个成为

You could just use two span elements, make one of them contenteditable. Example:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

.input {
  display: flex;
  justify-content: space-between
}

span {
  padding: 0.5em;
}

.value {
  flex-grow: 1;
}

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">10</span><span class="unit">kg</span></td>
    </tr>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">20</span><span class="unit">kg</span></td>
    </tr>
  </tbody>
</table>

或者，您可以使用 after 伪选择器添加单位.示例:

Alternatively, you could use the after pseudo-selector to add the unit. Example:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

.value::after {
  content: " kg";
}

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">10</span></td>
    </tr>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">20</span></td>
    </tr>
  </tbody>
</table>

这篇关于如何制作部分无法编辑的表格单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！