HTML通过按钮来显示、隐藏内容

<script type="text/javascript">
        function openShutManager(oSourceObj,oTargeObj,shutAble,oOpenTip,oShutTip){
            var sourceObj=typeof oSourceObj=="string"?document.getElementById(oSourceObj):oSourceObj;
            var targeObj=typeof oTargeObj=="string"?document.getElementById(oTargeObj):oTargeObj;
            var openTip=oOpenTip||"";
            var shutTip=oShutTip||"";
            if(targeObj.style.display!="none"){
                if(shutAble) return;
                targeObj.style.display="none";
                if(openTip&&shutTip){
                    sourceObj.innerHTML=shutTip;
                }
            }else{
                targeObj.style.display="block";
                if(openTip&&shutTip){
                    sourceObj.innerHTML=openTip;
                }
            }
        }
<h1><button onclick="openShutManager(this,'show1',false,'内容')">内容</button></h1>
<div id="show1">
    <span>我是隐藏的内容</span>
</div>

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用HTMLJavaScript来实现这个功能。首先,你需要在HTML中创建一个表单,包含输入框和一个按钮,如下所示: ```html <form> <label for="rows">行数:</label> <input type="number" id="rows" name="rows"> <br> <label for="cols">列数:</label> <input type="number" id="cols" name="cols"> <br><br> <button type="button" onclick="createTable()">生成表格</button> </form> <div id="table-container"></div> ``` 在上面的代码中,我们创建了一个包含两个输入框和一个按钮的表单,以及一个用于显示表格的容器div。当用户点击“生成表格”按钮时,会调用名为“createTable”的JavaScript函数。 下一步是编写JavaScript函数来读取输入框的值并创建表格。以下是一个简单的示例: ```javascript function createTable() { // 读取输入框的值 var rows = parseInt(document.getElementById("rows").value); var cols = parseInt(document.getElementById("cols").value); // 创建表格 var table = "<table>"; for (var i = 0; i < rows; i++) { table += "<tr>"; for (var j = 0; j < cols; j++) { table += "<td>" + (i+1) + "," + (j+1) + "</td>"; } table += "</tr>"; } table += "</table>"; // 将表格添加到容器中 document.getElementById("table-container").innerHTML = table; } ``` 在上面的代码中,我们首先读取输入框的值,并使用循环创建一个包含指定行数和列数的表格。每个单元格中都包含其所在的行和列号。最后,我们将表格添加到容器div中。 现在你可以在浏览器中打开HTML文件并测试这个功能了。当你输入行和列的数量并点击按钮时,应该会在页面上显示一个包含指定行数和列数的表格。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值