<!DOCTYPE html> <html lang="en"> <!---- 这里通过原生js实现了表格输入功能， 总体分为一下步骤 1，创建一个表格 2，event.srcElement 获取激活事件的对象，获取已经点击的单元格索引 3，通过处理函数abc（）判断输入内容并将内容显示在新的表格中。 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> table, table td, table tr { border: 1px solid #000000; width: 600px; height: 50px; text-align: center; border-collapse: collapse; overflow: hidden } input { width: 30px; height: 30px; border:0; } </style> <body> <table id="tb_1" onclick="TabClick();"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>h</td> <td>i</td> <td>j</td> <td>k</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </table> <script> function TabClick(){ var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td // alert("行号：" + (td.parentElement.rowIndex) + "，列号：" + td.cellIndex); let str ='' if(td.parentElement.rowIndex != undefined || td.cellIndex != undefined){ str = td.parentElement.rowIndex.toString() +td.cellIndex.toString() var oldCellValue = td.innerHTML //在单元格中插入一个input，并将它的id设置成行列组成的数字，将这个单元格的索引传递给失去焦点触发的函数,并将单元格的旧数据传递过去 //td.innerHTML="<input id='"+str+"' type='text' onblur = abc("+td.parentElement.rowIndex+","+td.cellIndex+","+oldValue+") name='temp' value='' >"; td.innerHTML="<input id='"+str+"' type='text' onblur = abc('"+td.parentElement.rowIndex+"','"+td.cellIndex+"','"+str.toString()+"','"+oldCellValue+"') name='temp' value='"+oldCellValue+"'/>"; var input1=document.getElementById(str); //获取到创建的input input1.focus(); //让input获得焦点 } else { console.log('否则'+td.parentElement.rowIndex); } } function abc(row,cell,nInputId,oldCellValue){ //处理input失去焦点时的动作 /* 1,通过ID获得创建的input 2,通过ID获得当前表格 3,判断input是否输入了值 3.1没有输入就写入单元格之前的值 3.2输入了就写入输入过的值 4,通过传递过来的表格索引，给当前点击的单元格写入内容 */ let nInput = document.getElementById(nInputId) let table= document.getElementById('tb_1') nInput.onchange = function(){ console.log('aaa') } if(nInput.vallue !='' ){ console.log(oldCellValue) console.log(nInput.value) table.rows[row].cells[cell].innerHTML = nInput.value console.log('不是空的') } else { console.log('空') table.rows[row].cells[cell].innerHTML = oldCellValue } if(table.rows[row].cells[cell] == ''){ table.rows[row].cells[cell].innerHTML = oldCellValue } } </script> </body> </html>
标签：console,log,表格,innerHTML,js,输入框,input,table,td From： https://www.cnblogs.com/cxywxzj/p/17911775.html