jjzjj

html - table > tbody > tr > td > div > 在不调整表格大小的情况下切换跨度和文本框？

coder 2023-08-11 原文

所以我得到了我正在尝试制作的控件。它是一个网站的就地文本编辑器，基本思想是它会显示一个带有一些文本的标签，当你点击文本时，标签消失，文本框出现在它的位置，这样用户就可以编辑数据。

总体布局是这样的(为清楚起见删除了 id 和事件):

<table>
  <tbody>
    <tr>
      <td>
         Some other cell, etc.
      </td>
      <td>
        <div>
          <span>When you click me, I'll disappear and show the input instead.</span>
          <input type="textbox" style="display:none"/>
        </div>
      </td>
    <tr>
  </tbody>
</table>

所以问题是，此设置非常繁琐，并且会在跨度消失且输入出现时调整单元格的大小。我的总体目标是能够在 div、span 和/或输入上设置一些 CSS，以便让这个东西保持静止。我对 position:absolute 在 div 上有一点运气，但是，文本只是溢出了它的边界，并且没有在单元格内正确换行。

因为这是一个控件，我可以根据需要移动这三个元素，或者添加其他元素，但我真的很想单独留下 table、tbody、tr 和 td 标签。

有什么想法吗？

编辑:

最后，我得到了这样的结果:

.inPlaceEditor
{
    margin-right:0px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
    white-space:normal;
    display:block;
    width:100%;
    height:100%;
}

.inPlaceEditor span
{
    white-space:normal;
}

.inPlaceEditor input[type="textbox"]
{
    display:none;
    width:100%;
    border:solid 0px black;
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-top:0px;
    padding-left:0px;
}

使用如下所示的点击事件处理程序:

function ShowInPlaceTextEditor(_this) {
    var div = $(_this).closest('td');
    div.css({ height: div.height(), width: div.width() });
    $(_this).hide().next().show().focus().selectAllText();
}

还有一个关联的处理程序，它隐藏了如下所示的文本框:

function HideInPlaceTextEditor(_this) {
    $(_this).closest('td').css('height', '');
    $(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show();
}

感谢所有提供帮助的人。

最佳答案

如果您可以依赖 javascript，请在​​该单元格中的所有内容周围包裹一个 div。当页面加载时，获取该 div 呈现时的当前高度。然后，将该高度分配给样式中的 div。这样，当您显示输入时，它仍应由分配给它的高度的那个 div 支撑打开。我怀疑输入比文本的跨度高一点，因此您可能需要将该高度提高几个像素。

关于html - table > tbody > tr > td > div > 在不调整表格大小的情况下切换跨度和文本框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2343856/

ampgtsectiondivhtmlcss

有关html - table > tbody > tr > td > div > 在不调整表格大小的情况下切换跨度和文本框？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  3. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  7. ruby - 在不使用 RVM 的情况下在 Mac 上卸载和升级 Ruby - 2

    我最近决定从我的系统中卸载RVM。在thispage提出的一些论点说服我:实际上，我的决定是，我根本不想担心Ruby的多个版本。我只想使用1.9.2-p290版本而不用担心其他任何事情。但是，当我在我的Mac上运行ruby--version时，它告诉我我的版本是1.8.7。我四处寻找如何简单地从我的Mac上卸载这个Ruby，但奇怪的是我没有找到任何东西。似乎唯一想卸载Ruby的人运行linux，而使用Mac的每个人都推荐RVM。如何从我的Mac上卸载Ruby1.8.7？我想升级到1.9.2-p290版本，并且我希望我的系统上只有一个版本。 最佳答案

  8. ruby-on-rails - 找不到 gem railties (>= 0.a) (Gem::GemNotFoundException) - 2

    我已经看到了一些其他的问题，尝试了他们的建议，但没有一个对我有用。我已经使用Rails大约一年了，刚刚开始一个新的Rails项目，突然遇到了问题。我卸载并尝试重新安装所有Ruby和Rails。Ruby很好，但Rails不行。当我输入railss时，我得到了can'tfindgemrailties。我当前的Ruby版本是ruby2.2.2p95(2015-04-13修订版50295)[x86_64-darwin15]，尽管我一直在尝试通过rbenv设置ruby​​2.3.0。如果我尝试rails-v查看我正在运行的版本，我会得到同样的错误。我使用的是MacOSXElCapitan版本10

  9. ruby - 在什么情况下会使用 Sinatra 或 Merb？ - 2

    我正在学习Rails，对Sinatra和Merb知之甚少。我想知道您会在哪些情况下使用Merb/Sinatra。感谢您的反馈! 最佳答案 Sinatra是一个比Rails更小、更轻的框架。如果你想让一些东西快速运行，只需发送几个URL并返回一些简单的内容，就可以使用它。看看Sinatrahomepage;这就是启动和运行“Hello,World”所需的全部内容，而在Rails中，您需要生成整个项目结构、设置Controller和View、设置路由等等(我还没有有一段时间写了一个Rails应用程序，所以我不知道“Hello,World

  10. ruby - 是否可以在不实际发送或读取数据的情况下查明 ruby​​ 套接字是否处于 ESTABLISHED 或 CLOSE_WAIT 状态？ - 2

    s=Socket.new(Socket::AF_INET,Socket::SOCK_STREAM,0)s.connect(Socket.pack_sockaddr_in('port','hostname'))ssl=OpenSSL::SSL::SSLSocket.new(s,sslcert)ssl.connect从这里开始，如果ssl连接和底层套接字仍然是ESTABLISHED，或者它是否在默认值7200之后进入CLOSE_WAIT，我想检查一个线程几秒钟甚至更糟的是在实际上不需要.write()或.read()的情况下关闭。是用select()、IO.select()还是其他方法完成

随机推荐