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

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

    xiaoxiao2021-12-14  21

    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 } } } }
    转载请注明原文地址: https://ju.6miu.com/read-962699.html

    专利

    最新回复(0)