怎么把下面乘法表的输出与显示隐藏盒子关联起来

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<p class="duan">显示的内容</p >

<div>

</head>

<body>

$(function(){

$(".yin").click(function(){$("p").hide()})

$(".xian").click(function(){$(".duan").show()})

});

</script>

for(var r=0;r<=9;r++){

for(var i=1,str="";i<=r;i++){

str+=i+"x"+r+"="+i*r+" ";

}

console.log(str);

}

var tab = document.createElement('TABLE');

tab.style.border = '1px solid black';

tab.style.borderCollapse='collapse';

for(var i = 1; i <=9 ; i++){

var tr = document.createElement('TR');

tab.appendChild(tr);

for(var j = 1,str=""; j<=i ; j++){

str=j+"x"+i+"="+i*j+" ";

var td = document.createElement('TD');

td.style.border = '1px solid black';

td.style.height = '20px';

td.innerHTML=str;

tr.appendChild(td);

}

document.body.appendChild(tab);

</script>

</body>

</html>

给table添加id，修改下显示隐藏代码就行了

帮助到你可以点击采纳吗，谢谢

<!DOCTYPE html>
<html>
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>

    <div id="box">
        <p class="duan">显示的内容</p>
        <button class="yin">单击隐藏</button>
        <button class="xian">单击显示</button>
        <div></div>

            <script type="text/javascript">
                $(function () {
                    $(".yin").click(function () { $("#cfb").hide() })
                    $(".xian").click(function () { $("#cfb").show() })

                });

            </script>
            <script>
                for (var r = 0; r <= 9; r++) {
                    for (var i = 1, str = ""; i <= r; i++) {
                        str += i + "x" + r + "=" + i * r + " ";
                    }
                    console.log(str);
                }

                var tab = document.createElement('TABLE'); tab.id = 'cfb';
                tab.style.border = '1px solid black';
                tab.style.borderCollapse = 'collapse';
                for (var i = 1; i <= 9; i++) {
                    var tr = document.createElement('TR');
                    tab.appendChild(tr);
                    for (var j = 1, str = ""; j <= i; j++) {
                        str = j + "x" + i + "=" + i * j + " ";
                        var td = document.createElement('TD');
                        td.style.border = '1px solid black';
                        td.style.height = '20px';
                        td.innerHTML = str;
                        tr.appendChild(td);
                    }
                }
                document.body.appendChild(tab);
            </script>
</div>
</body>

</html>

下面的代码只隐藏结果，不隐藏表格

<!DOCTYPE html>
<html>
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>

    <div id="box">
        <p class="duan">显示的内容</p>
        <button class="yin">单击隐藏</button>
        <button class="xian">单击显示</button>
        <div></div>

            <script type="text/javascript">
                $(function () {
                    $(".yin").click(function () { $(".result").css('visibility','hidden') })
                    $(".xian").click(function () { $(".result").css('visibility', 'visible') })

                });

            </script>
            <script>
                for (var r = 0; r <= 9; r++) {
                    for (var i = 1, str = ""; i <= r; i++) {
                        str += i + "x" + r + "=" + i * r + " ";
                    }
                    console.log(str);
                }

                var tab = document.createElement('TABLE'); tab.id = 'cfb';
                tab.style.border = '1px solid black';
                tab.style.borderCollapse = 'collapse';
                for (var i = 1; i <= 9; i++) {
                    var tr = document.createElement('TR');
                    tab.appendChild(tr);
                    for (var j = 1, str = ""; j <= i; j++) {
                        str = j + "x" + i + "=<span class='result'>" + i * j + " </span>";
                        var td = document.createElement('TD');
                        td.style.border = '1px solid black';
                        td.style.height = '20px';
                        td.innerHTML = str;
                        tr.appendChild(td);
                    }
                }
                document.body.appendChild(tab);
            </script>
</div>
</body>

</html>