原生表格文本过长展示问题,参考layui长文本,点击出现文本域

需要引入layui文件

效果

html代码, 记得class="layui-table"; 这要有

    <form class="js-ajax-form" method="post" autocomplete="off"><table class="layui-table"><thead><tr><th>退烧药</th></tr></thead><tbody><foreach name="list" item="vo"><tr><td><if condition="!empty($vo.drug_names)"><if condition="mb_strlen($vo.drug_names, 'utf-8') gt 10"><span class="layui-inline age-text"onclick="toggleAgeTextarea(this, '{$vo.drug_names}')">{$vo.drug_names|mb_substr=0,10}...</span><textarea class="layui-textarea age-textarea"style="display: none; width: 200px; height: 40px;"readonlyonblur="toggleAgeTextarea(this)"></textarea><else/><span>{$vo.drug_names}</span></if></if></td></tr></foreach></tbody></table></form>

js 可以弄公共部分每个页面都引入一下

    <!-- 显示隐藏长文本框 --><script>// 切换显示文本与文本框window.toggleAgeTextarea = function (element, currentValue) {var textarea = element.nextElementSibling;if (textarea.style.display === 'none') {// 显示文本框element.style.display = 'none';textarea.value = currentValue;textarea.style.display = 'block';// 定位文本框在点击位置var rect = element.getBoundingClientRect();textarea.style.position = 'absolute';textarea.style.left = rect.left + 'px';textarea.style.top = rect.top + 'px';textarea.style.zIndex = '1000';textarea.style.resize = 'both';textarea.style.overflow = 'auto';textarea.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';textarea.style.minHeight = '70px';textarea.style.minWidth = '200px';textarea.focus();} else {// 隐藏文本框，显示文本var updatedValue = textarea.value;textarea.style.display = 'none';element.innerText = updatedValue.length > 10 ? updatedValue.substr(0, 10) + "..." : updatedValue;element.style.display = 'inline';}};// 监听文本框失去焦点document.addEventListener('blur', function (event) {var target = event.target;if (target.classList.contains('age-textarea')) {var textarea = target;var spanElement = textarea.previousElementSibling;// 隐藏文本框并更新显示文本textarea.style.display = 'none';var updatedValue = textarea.value;spanElement.innerText = updatedValue.length > 10 ? updatedValue.substr(0, 10) + "..." : updatedValue;spanElement.style.display = 'inline';}}, true);</script>