如何向html表格中输入文本

       由于在制作html 表格,即table。会出现制作好的表格却不能输入文字的情况。

于是,我们可以有两种选择。

(1)添加文本框,即:<input type="text" style="" />

    <table>

    <tr>

           <td> <input  type="text" style="width:100%;height:100%" /></td>

    </tr>

    </table>

   这样就可以往表格里面添加文本啦

(2)利用html5中的属性contenteditable即可,而且不会出现边框叠加的颜色加深问题


 用法:

<table>

<tr>

     <td contenteditable="true"></td>

</tr>

</table>

    当然,由于浏览器版本的问题,低版本的浏览器本不支持html5的新属性,所以在使用时,要充分考虑到这一点。

  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤将一个表格的字段变为输入文本框: 1. 获取要变为输入文本框的表格单元格元素。 2. 创建一个输入文本框元素,并设置其属性和样式。 3. 将表格单元格元素的内容设置为输入文本框元素。 4. 给输入文本框元素绑定事件,监听用户的输入。 下面是一个示例代码,用于将表格的第一行第二列变为输入文本框: ```html <!DOCTYPE html> <html> <head> <title>表格字段变输入文本</title> <style type="text/css"> input { border: none; padding: 0; margin: 0; width: 100%; height: 100%; } </style> </head> <body> <table> <tr> <td>姓名</td> <td class="editable">张三</td> <td>年龄</td> <td>18</td> </tr> <tr> <td>性别</td> <td>男</td> <td>地址</td> <td>北京市</td> </tr> </table> <script type="text/javascript"> // 获取要变为输入文本框的表格单元格元素 var cell = document.querySelector('.editable'); // 创建一个输入文本框元素,并设置其属性和样式 var input = document.createElement('input'); input.type = 'text'; input.value = cell.innerText; input.className = 'editable-input'; // 将表格单元格元素的内容设置为输入文本框元素 cell.innerText = ''; cell.appendChild(input); // 给输入文本框元素绑定事件,监听用户的输入 input.addEventListener('input', function() { cell.innerText = input.value; }); </script> </body> </html> ``` 在这个示例,我们使用了一个类名为“editable”的表格单元格元素,将其变为了一个输入文本框。你可以根据自己的实际需求,修改代码的类名和表格单元格位置,来实现你的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值