聊天框 对话 全选 实现表格的及时编辑

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量338 收藏
点赞数
文章标签： html 聊天 表格编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clearupshallow/article/details/53432771
版权

html代码

<html>
   <head>
      <title></title>


      <script src="demo3.js"></script>
    <style>
            *{font-size: 14px;margin: 0px;padding: 0px;}
            .main
            {
              border: 1px solid blue;
              width: 450px;
              height: 400px;
              position: relative;
              margin: 20px auto;
            }
            .content
            {
                border: 1px solid gainsboro;
                width: 430px;
                height: 320px;
                list-style: none;
                margin: 5px auto;
                overflow-y: scroll;  /*水平裁剪超过边沿的内容，出现滚动*/
            }
            .msg
            {
                width: auto;
                height: auto;
                max-width: 300px;
                margin: 5px;
                padding: 3px;
                word-break: break-all; /*允许在单词内换行*/
                border-radius: 5px;
                clear: both;
            }
            .content .left
            {
                background-color: greenyellow;
                float: left;
                text-align: right;
            }
            .content .right
            {
                background-color: green;
                float: right;
                text-align: right;
            }
            .new_msg
            {
                width: 430px;
                height: auto;
                margin: 5px auto;
                display: block;
            }
            .send_btn
            {
                width: 100px;
                height: 25px;
                position: absolute;
                right: 8px;
                bottom: 4px;
            }

        </style>


   </head>

   <body>

    <div class="main">

            <ul id="content" class="content">
                <li class="msg left">hello</li>
                <li class="msg right">hello</li>
                <li class="msg left">who are u</li>
                <li class="msg right">lilei</li>
                <li class="msg right">aaa</li>
            </ul>

            <textarea id="msg" class="new_msg"></textarea>
            <button id="btn" class="send_btn">发送</button>

        </div>


   </body>


</html>

js代码


//实现ctrl+enter发送消息
//判断输入框里面包含ctrl+enter发送消息
    onload =function(){
        var msg=document.getElementById("msg");
        var btn=document.getElementById("btn");
        var content=document.getElementById("content");
        btn.onclick=function(){
            var msg_value=msg.value;

            var li =document.createElement("li");
            li.className="msg right";
            li.innerHTML=msg_value;

        //li添加到ul中
        content.appendChild(li);
        msg.value="";


    }
        msg.onkeypress=function(evt){
            var evt =evt||window.event;
            //判断当前是按下了ctrl+enter
            if(evt.ctrlKey&&(evt.keyCode==13||evt.keyCode==10)){
                //alert("111");
                //alert(btn.onclick);
                btn.onclick();
            }

            }




}

全选

html代码
<html>
   <head>
      <title></title>


       <script src="demo4.js"></script>
   </head>

   <body>

   全选<input type="checkbox" id="all"/></br>
        C++<input type="checkbox" /></br>
        C<input type="checkbox" /></br>
        Javascript<input type="checkbox" /></br>
        JAVA<input type="checkbox" /></br>
        php<input type="checkbox" /></br>
        C#<input type="checkbox" /></br>
        Python<input type="checkbox" /></br>


   </body>


</html>
js代码

    onload =function(){
     var all=document.getElementById("all");
     var inputs=document.getElementsByTagName("input");
     all.onclick=function(){
         if(all.checked){
             for(var i=0;i<inputs.length;i++){
                 inputs[i].checked=true;
             }

         }else{
             for(var i=0;i<inputs.length;i++){

                 inputs[i].checked=false;    }  
 }

}
 }

表格的及时编辑

html代码
<html>
   <head>
      <title>表格的及时编辑</title>


       <script src="demo5.js"></script>
   </head>

   <body>


        <table border="1">
            <tr>
                <td>你好</td>
                <td>祝你幸福</td>
                <td>再见</td>
            </tr>           
        </table>



   </body>


</html>
js代码
onload =function(){                     

     var tds=document.getElementsByTagName("td"); //   获得标签名
     for(var i=0;i<tds.length;i++){         
         tds[i].onclick=function(){         
             //首先获得原有的值
             var str =this.innerHTML;//td.innerHTML;        
             //修改里面内容
             //1创建输入框
             var input=document.createElement("input");
             this.innerHTML="";
             input.value=str;
             //2把输入框添加到td中
             this.appendChild(input);
             //获取焦点
             input.focus();
             //选中内容
             input.select();
             //再次点击的时候，我们可以使用阻断
             input.onclick=function(evt){
                 var event=evt||window.event;
                window.event?evt.cancelBubble=true:evt.stopPropagation();
             }
             //当我们失去焦点，保存内容
             input.onblur = function(){
                 this.parentNode.innerHTML = this.value;//this input
             }



         }
     }
 }
clearupshallow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现一个可以编辑单元格的表格
努力努力再努力
08-08 2万+
最近开发的小程序中，提到了一个需要一张可编辑的表格，固定列可增加行，并且需要可改变任意单元格的内容。 页面布局表格主体采用flex布局来模拟实现。分别用tr和td代表行和每个单元格,由于需要展示的内容较多，所以使用scroll-view来让表格可以 水平滑动。<scroll-view scroll-x style="width: 100%" class="table"> <block wx
聊天窗口演示（XML+GDI表情管理、图文混排...）
05-16
一直以来都比较羡慕那些，界面美观，功能强大的即时通讯软件，自己慢慢摸索了好长时间，用MFC做了一个聊天程序主窗口演示小程序。 该程序主要自定义了CRichEditCtrl控件，使用XML技术与GDI处理各种图片及QQ表情组件，串行化数据等，使得程序拥有了一般聊天程序应用的特色（同时仿FeiQ程序的自动释放程序运行需要的资源到安装目录）： 支持字体设置、图文混排、表情及各种格式图片的插入、发送与保存，聊天记录的保存等等... 1、聊天输入、输出窗口：使用CRichEditCtrl控件，扩展后方便了字体设置、图文混排、表情及各种格式图片的插入，及窗口上右键菜单的功能。 2、聊天表情：这一部分是我精心制作的，使用GDI处理各种图片使得程序支持各种格式图片的预览、插入、保存。使用XML技术，方便快捷管理表情数据。自动释放表情图片资源（程序所在目录）及QQ表情组件（放到\System32\ImageOle.dll），程序自动注册组件，让程序支持GIF格式表情的插入。程序仿FeiQ自动生成表情页面缓存图片，快捷增加大量表情。本程序生成缓存图时，使用多线程技术，增加、修改完后立即更新页面缓存图，几千张图片，马上生成完成。 3、表情管理：支持表情的添加、删除、修改，移动，导入、导出表情库等，修改完后自动删除需要更新的页面缓存图，及程序程序无关的文件等。 4、聊天记录：使用串行化数据技术，将聊天记录生成到Log.dat文件中，可分页浏览记录。 本程序本人精心制件，最近一段时间在弄一个即时通讯软件，程序马上完工，完工后立即上传，由于弄程序花了不少精力，出于私心暂时不公布了。。。。
javascript创建对话表格.html
05-26
用javascript编译的 javascript创建对话表格.html
EditTable可编辑的表格
weixin_30639719的博客
03-23 889
EditTable可编辑的表格 EditTable基于tabel布局的表格，表格内容单击可以编辑，编辑完毕即可显示新的内容； ESC按键可以撤销编辑，返回原有内容。 点击“添加”按钮可以实现表格的增加； 点击“删除”可以删除当前表格。 兼容了当前-IE系列、chrome等主流浏览器。 清晰明了的结构实现了此需求。 table-layout:fixed;记得一...
打造微信一样的聊天功能：tp5+workerman实现在线聊天客服功能（二）
不知道起什么名字
10-06 1813
今天要分享的内容有两块， 1、保存聊天记录到数据库（形成持久化）； 2、初始化打开聊天界面，显示最近的聊天记录。 等不及了，那么开始吧…… 一、建立数据库表 聊天记录表： 用户名表： 二、在《打造微信一样的聊天功能：tp5+workerman实现在线聊天客服功能（一）》代码的基础上修改代码: 1、在events.php增加或修改（红框中的代码）： 2、视图层i...
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
利用Bootstrap实现表格复选框checkbox全选
08-31
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
layui复选框的全选与取消实现方法
12-29
废话不多说啦，直接贴上代码吧！    *权限表        
易语言全选编辑框内容
08-17
"易语言全选编辑框内容源码"可能是指实现全选功能的特定代码片段，这部分代码会在“编辑框1”获得焦点时执行全选操作。 4. **实现全选功能**：在易语言中，全选编辑框内容的实现一般会涉及到编辑框的API或内置函数...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2675
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1058
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 871
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 333
iframe 预览邮件 + 打印邮件 + 模拟滚动条
前端与HTML
m0_65544927的博客
07-21 476
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 460
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 862
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 585
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
MFC 编辑框实现默认全选内容
05-28
在 MFC 编程中，可以通过重载 `CEdit` 类的 `OnSetFocus` 函数实现编辑框默认全选内容的功能。具体步骤如下： 1. 在资源编辑器中创建一个编辑框控件，可以设置其属性为多行（Multiline）和只读（Read-only）。 2. 在类向导中添加该编辑框的成员变量，并将其类型设置为 `CEdit`。 3. 在该编辑框的消息映射中添加 `WM_SETFOCUS` 消息的处理函数。处理函数的代码如下： ```cpp void CMyDlg::OnSetfocusEditContent() { // 获取编辑框控件指针 CEdit* pEdit = (CEdit*)GetDlgItem(IDC_EDIT_CONTENT); // 设置编辑框内容全选 pEdit->SetSel(0, -1); } ``` 其中，`GetDlgItem` 函数用于获取编辑框控件的指针，`SetSel` 函数用于设置编辑框内容的选中区域，参数 `-1` 表示选中所有内容。 4. 在对话框创建时，将焦点设置到该编辑框控件上。可以在 `OnInitDialog` 函数中添加以下代码： ```cpp BOOL CMyDlg::OnInitDialog() { CDialogEx::OnInitDialog(); // TODO: Add extra initialization here // 将焦点设置到编辑框控件上 GetDlgItem(IDC_EDIT_CONTENT)->SetFocus(); return TRUE; // return TRUE unless you set the focus to a control } ``` 这样，在打开对话框时，编辑框中的所有内容就会被默认全选了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值