填完内容后，添加，但是添加的表格非常细，显示不了内容，那里出错了


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <script>
            function app(){
                var inputs=document.getElementsByTagName("input");
                var str=inputs[0].value;
                var str1=inputs[1].value;
                var str2=inputs[2].value;
                if((str.length>0)&&(str1.length>0)&&(str2.length>0)){
                    var nT=te.insertRow();
                    var Td0=nT.insertCell();
                    var Td1=nT.insertCell();
                    var Td2=nT.insertCell();
                    var Td3=nT.insertCell();
                    Td0.innerHTML=input[0].value;
                    Td1.innerHTML=input[1].value;
                    Td2.innerHTML=input[2].value;
                    Td3.innerHTML="";
                }
                else{
                    alert("请把信息填写完整");
                    return;
                }
            }
            function db(r){
                var i=r.parentNode.parentNode.rowIndex;
                document.getElementById("te").deleteRow(i);
            }
        script>
    head>
    <body>
        <p align="center" id="info">
            姓名：<input type="text" id="username"/>
            Email：<input type="text" id="email"/>
            年龄：<input type="text" id="age"/>
        p>
        <div align="center">
            <input type="button" value="添加" onclick="app()"/>
        div>
        <hr>
        <table align="center" border="1" id="te" style="width: 60%;text-align: center;border: 1px solid red;">
            <tr>
                <td>姓名td>
                <td>Emailtd>
                <td>年龄td>
                <td>操作td>
            tr>
        table>
    body>
html>

img

把内容打印出来看看，或者设置一个高度

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7543419
  • 这篇博客你也可以参考下：路径正确，但是图片加载不出来
  • 除此之外, 这篇博客: 帆软填报单元格内容过多展示不全，鼠标悬浮单元格提示框展示所有内容中的 设置，第一步：添加形态： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • "<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block;width:100%;'>"+$$$+"</span>"

    第二步：其他修改 

     

     

    $('.reportPane')[0].style.background = "#1e243c";

    var trs = $('.x-table tr');
    trs.each(function(i, e) {
        if (i % 2 == 0) {
            e.style.backgroundColor = "#3e495b";
        } else {
            e.style.backgroundColor = "#353e4f";
        }
    });


    //var currentcell = contentPane.curLGP.currentTDCell;
    //if (currentcell != undefined) {
    //var currow = $('.x-table tr')[contentPane.curLGP.getTDRow(currentcell)];
    //currow.style.backgroundColor = "#2f4b69";
    //currow.style.borderStyle = "solid";
    //currow.style.borderWidth = "3px";
    //currow.style.borderColor = "#3881c6 #1e4570 #1e4570 #3881c6";
    //};

    //鼠标经过
    $(".x-table tr").mousemove(function() {
        $(this).css("background-color", "#2f4b69");
        $(this).css("border-style", "solid");
        $(this).css("border-width", "3px");
        $(this).css("border-color", "#3881c6 #1e4570 #1e4570 #3881c6");
    });
    //鼠标点击
    $(".x-table tr").mousedown(function() {
        $(this).css("background-color", "#2f4b69");
        $(this).css("border-style", "solid");
        $(this).css("border-width", "3px");
        $(this).css("border-color", "#3881c6 #1e4570 #1e4570 #3881c6");
    });
    //鼠标离开
    $(".x-table tr").mouseout(function() {
        var i = $(this).context.rowIndex;
        $(this).css("border", "none");
        if (i % 2 == 0) {
            $(this).css("background-color", "#3e495b");
        } else {
            $(this).css("background-color", "#353e4f");
        }
    });

  • 您还可以看一下 林礼晓老师的行政文员转型初级产品经理第一季课程中的 前言介绍小节, 巩固相关知识点