TEXTAREA中加入TABLE

最新推荐文章于 2023-04-26 11:06:25 发布
原创 最新推荐文章于 2023-04-26 11:06:25 发布 · 3.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #javascript #class #button #function

本文介绍了一种通过将表格内容转换并存入文本区的方法来实现参数传递的技术方案。此方法利用HTML与JavaScript结合，将表格数据动态填充到隐藏的文本区域中，以便作为参数进行传递。

为了传递一批参数,将TABLE中的内容加到TEXTAREA中.作为一个参数传送.

<textarea NAME="DZCOUNTSJ"  id="bc" style="display:none">
</textarea>
<input type="button" value="保存" onclick="doBtnClick()">

 

  <table width="100%" cellspacing="1" class="style2" style="height: 50px" id="dz">
    <tr>
      <td align="center" class="style1" style="width: 40%">AAAAAAAAAAAAAA</td>
    </tr>
  </table>

 

  <SCRIPT type="text/javascript" LANGUAGE="JavaScript">   
  <!--
  function doBtnClick()
  {   
  dzcountbc.appendChild(document.getElementById("dzcount"));   
  }
  //-->  
  </SCRIPT>  

zmphy
关注
html table + textarea css 简单实现可输入的作文格
qq_41777791的博客
08-27 981
html table + textarea css 简单实现可输入的作文格 源码底部自取 实现要点： table相对于textarea进行绝对定位 table的z-index的值比textarea小 textarea的背景设置成透明 调整行高与字符间距使其正好落在单元格中 效果图如下所示（英文字符没做适配，这里只是做简单实现，读者可以考虑使用div模拟table） //源码（简单实现） <!DOCTYPE html> <html lang="en"> <head>
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
放弃不难，但坚持一定很酷！
03-07 2983
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
Textarea插入表格table，保存到数据库。jsp页面显示表格问题
阳光宅男
08-05 5319
自己做的一个小项目中。在一个textarea域中加一个表格。这在不借助插件的情况下是不能做到的。于是我们找了一个国内人做的一个开源插件：Kindeditor。这款插件在国内还是没多人用的，而且本版也到4.x了，相对来说比较成熟。而csdn用的是xheditor。不管怎么样，只要能实现我们想要的功能就ok。 这里不介绍怎么具体去使用这个插件。主要讲述遇到的两个问题。 第一：后台取不到Textar
将文本随意插入网页表单的 textarea
aome1470的博客
11-04 157
原作者：我佛山人 出处：5D多媒体在网页表单的<textarea>中，我们有时候需要将文本插入到光标所在的地方，或是替换掉选区内的文字。这时候，用普通的.value+="text"就无能为力了。下面这段测试代码可以解决这个问题，供大家参考：function getActiveText() {obj.currPos = document.selection.cre...
table表格中，一行有多个textarea，调整一行中某一个textarea高度时，使同一行中其他textarea高度同步变化
fangcuidong的博客
04-26 574
table表格中，一行有多个textarea，调整一行中某一个textarea高度时，使同一行中其他textarea高度同步变化。，td的高度会被子元素撑开，这样能让td中的子元素占满td的高度。此时拉高其中一个textarea的高度，其余高度并不会变化。问题：这样修改后发现无法修改textarea的高度了。思路：让td中的元素占满高度 100%发现无效果，因为td没有高度。解决：给td添加高度。
el-table + textarea输入 + sortablejs +删除+添加 实现拖拽排序 的研究！
放弃不难，但坚持一定很酷！
08-02 1678
el-table + textarea输入 + sortablejs +删除+添加 实现拖拽排序 的研究
上个问题中，前端展示是用的a-textarea，如何处理
最新发布
01-07
我们面对的核心问题是：当达梦数据库的CLOB大文本...但为了完整解决用户问题，我们实现分块加载并展示在a-textarea中。 完整代码示例（Vue3 + Ant Design Vue）： ```vue <a-textarea v-model="displayText" ...
JS怎么给table中的某一列域设置disabled
07-13
如果用户希望禁用特定条件的行（例如引用[1]中根据行数据判断），我们也可以加入条件判断。 例如，根据行中某个单元格的值来决定是否禁用： ```javascript var table = document.getElementById("myTable"); for ...
请在以上代码中加入INNER JOIN的语法转换
11-14
所以，我们要求连接条件中出现的表必须是在FROM子句中出现的，并且我们按照FROM子句中的表顺序（第一个表作为主表）以及条件出现的顺序来连接。 具体步骤： a. 我们保留FROM子句中的表列表（tables）。 b. 主表...
让TextArea支持Table键
jysh0922的专栏
11-19 334
table中的textarea input colspan rowspan
古笑来的博客
12-24 1038
&lt;table&gt; &lt;tr&gt; &lt;td align="right" width="10%"&gt;任务名称：&lt;/td&gt; &lt;td width="20%" align="left"&gt;&lt;input type="text" readonly="readonl
对antd的Input/TextArea进行一层封装，限制用户输入长度，并实时显示用户输入的长度
weixin_43654374的博客
04-17 5134
原因 标题antd好像没实现这个功能，suffix属性在TextArea中不起作用，想了一下，反正是个小功能，就自己随便做了一下，其实很简单 ，就是写个标签然后定位到TextArea屁股后面就行了。 代码 const suffixStyle= { position:'relative'; left:'-50px'; user-select:'none'; } <div&g...
＜textarea＞表单元素
LEVIATHANq的博客
11-07 353
无
html---textarea初始化时就有个table空格以及tab键操作无效
易名
06-27 3570
1 初始化时就有一个tab空格     这是因为之间的内容不为空的原因，包括空格和换行，否则浏览器会认为空格或者换行都是文本域的内容，因此书写时需将紧靠在一起； 2 tab键对textarea操作无效     在textarea中使用tab键时是无效的，会切换到另一个控件上去，但是当我们有个需要时，要能够在文本域中使用tab键，可以使用javascript或者jquery方式实现：  
在Textarea中插入元素（光标位置）
应天.Net BLOG
03-16 1655
  function storeCaret (textEl) { if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate(); } function insertAtCaret (textEl, text) { if (textEl.createTextRange && te
html标签没有空间点击事件,iframe内嵌套的textarea标签没有鼠标点击事件怎么办
weixin_42504214的博客
06-28 349
是不是输入关键字就可以找到最有用的信息，当然不是，使用搜索引擎是有技巧的，下面我们看看百度和搜狗给大家介绍的搜索技巧前言代码全是放在新建板块的评论里 贴代码的同时建议把图片和网址栏清空背景皮肤我使用的具体代码：<img src="bbs.w3sea/_mytemp/qqzone/SMLOGO.gif" onload="document.getElementById('Mlogo').styl...
HTML下拉列表 textarea fieldset及表格的运用
csdn_wpno1的博客
07-10 2532
表单 1.1下拉列表 使用下拉列表的好处： （1）节省页面空间，使得页面更加简洁； （2）方便输入； （3）规范输入。      你来自：              浙江          河南          江苏          江西           提交"/> 标签定义了一个下拉列表 标签定义了下拉列表的一个选项 标签的
会客记录开发中的难点
lornall的博客
01-07 484
1.elment-ui 国家级联选择框log出来的值是undefined，传参的问题。 undefined value去掉 2. table布编的校验信息让它显示在表格里，CSS 3. 新增页面整体布局的问题 4.新增table里面textarea 撑开它的父亲，并且居中。 3.后端没数据的时候，模拟后端数据有时候是会出问题的，显示不出来，还是直接用后端数据吧。 4.table 排序，把里面的字符串都弄成Number就会生效了。 5.库存路由后头加数字的问题 6.名片识
Web前端20-45
xy22250227的博客
10-27 706
web前端
租赁系统中加入留言板块
03-26
<think>好的，用户想在租赁管理系统中添加留言功能，需要功能设计和代码实现的指导。首先，我需要考虑用户的需求，可能包括用户和管理员都能使用留言功能，留言的增删改查，以及权限控制。接下来，我需要参考之前提供的引用内容，特别是引用[2]中提到管理员和用户都可以对文章进行操作，这可能适用于留言模块的权限设计。引用[3]中的层次图可以帮助划分功能模块，确保结构清晰。引用[4]中的列表页面设计可以作为留言列表的参考。 首先，功能设计方面，需要确定留言的数据结构，比如留言内容、用户ID、时间等。然后考虑前后端的交互，前端需要展示留言列表和提供输入表单，后端需要处理数据的存储和接口。数据库设计可能需要一个messages表，包含必要的字段。权限方面，用户只能删改自己的留言，管理员则有全部权限，这点可以参考引用[2]的描述。 代码实现部分，用户可能希望使用Spring Boot和MyBatis作为技术栈，因为引用[1]提到SpringBoot的项目。后端需要创建Controller、Service、Mapper层，处理HTTP请求，操作数据库。前端可以使用Thymeleaf模板引擎，结合HTML和JavaScript实现动态交互，如Ajax提交留言。同时，权限控制可以使用Spring Security，确保用户和管理员的权限正确。 还需要考虑一些细节，比如留言的时间戳自动生成，防止XSS攻击对输入内容进行过滤，以及分页显示留言避免加载过多数据。测试时，要检查不同用户角色的权限是否正确，留言的增删改查是否正常工作，以及前后端的数据交互是否无误。 可能用户没有明确提到的需求包括留言的回复功能或通知机制，但根据常见租赁系统，可能需要后续扩展。不过当前问题聚焦在基础留言功能，所以先实现核心功能，再考虑扩展。 总结下来，步骤分为数据库设计、后端实现、前端实现、权限控制，并参考已有的引用内容来确保结构清晰和权限处理正确。需要确保代码符合MVC架构，保持模块化，方便后续维护和扩展。</think>### 租赁系统留言功能设计与实现 #### 一、功能设计 1. **模块定位** 留言功能属于用户交互模块，支持租户/管理员发布、查看、管理租赁相关的留言，提升系统沟通效率[^2]。 2. **核心功能** - **用户端** - 发布留言（带文本/图片） - 查看历史留言记录 - 删除/编辑本人留言 - **管理端** - 查看全站留言 - 删除违规留言 - 标记重要留言 3. **数据库设计** ```sql CREATE TABLE message ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, content TEXT NOT NULL, attachment VARCHAR(255), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, is_deleted TINYINT DEFAULT 0, FOREIGN KEY (user_id) REFERENCES user(id) ) ``` #### 二、技术实现（Spring Boot + MyBatis） 1. **后端接口** ```java @RestController @RequestMapping("/message") public class MessageController { @Autowired private MessageService messageService; // 提交留言 @PostMapping public ResultVO createMessage(@RequestBody MessageDTO dto) { return messageService.createMessage(dto); } // 分页查询 @GetMapping public PageResult<MessageVO> getMessages( @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size) { return messageService.getMessages(page, size); } // 删除留言（权限校验） @DeleteMapping("/{id}") public ResultVO deleteMessage(@PathVariable Long id) { return messageService.deleteMessage(id); } } ``` 2. **前端示例（Thymeleaf + Ajax）** ```html <!-- 留言输入区 --> <div class="message-box"> <textarea id="msgContent"></textarea> <button onclick="submitMessage()">发布留言</button> </div> <!-- 留言列表 --> <div id="messageList"> <div th:each="msg : ${messages}"> <p th:text="${msg.content}"></p> <span th:text="${#dates.format(msg.createTime, 'yyyy-MM-dd HH:mm')}"></span> <button th:if="${msg.userId == session.user.id}" onclick="deleteMessage(${msg.id})">删除</button> </div> </div> <script> function submitMessage() { $.post("/message", { content: $("#msgContent").val() }, function(res) { if(res.code === 200) { location.reload(); } }) } </script> ``` #### 三、权限控制 ```java @PreAuthorize("hasRole('ADMIN') or #userId == authentication.principal.id") @DeleteMapping("/{id}") public ResultVO deleteMessage(@PathVariable Long id, @RequestParam Long userId) { // 实现删除逻辑 } ``` #### 四、安全增强 1. 使用`@Valid`校验留言内容长度 2. 对HTML内容进行XSS过滤 3. 限制图片附件类型（jpg/png）和大小（<5MB）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值