js表格输入

晨曦与晚霞之间

于 2023-12-18 17:39:32 发布

阅读量399

点赞数 9

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/twh_klr/article/details/135068063

版权

<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>