Fatal编程技术网
  • javascript/
  • 在Javascript中单击按钮时显示表格

在Javascript中单击按钮时显示表格

javascript html bootstrap-4

在Javascript中单击按钮时显示表格,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我正在使用javascript、HTML、CSS和bootstrap构建一个名为：网球俱乐部管理的示例项目。在这里，我有一个登录页面（index.html）和管理玩家页面（managePlayers.html）。在managePlayers.html中，我有两个按钮，即添加播放器和显示播放器。单击两个按钮的事件时，我需要显示表 添加玩家单击将显示以HTML创建的表，显示玩家单击将显示以javascript创建的表，因为它将根据从API获取的数据动态显示表数据 我面临的问题是，当我单击显示播放器按

我正在使用javascript、HTML、CSS和bootstrap构建一个名为：网球俱乐部管理的示例项目。在这里，我有一个登录页面
（index.html）
和管理玩家页面
（managePlayers.html）
。在
managePlayers.html
中，我有两个按钮，即添加播放器和显示播放器。单击两个按钮的事件时，我需要显示表

添加玩家单击将显示以HTML创建的表，显示玩家单击将显示以javascript创建的表，因为它将根据从API获取的数据动态显示表数据

我面临的问题是，当我单击显示播放器按钮时，表格会显示出来，然后当我单击添加播放器按钮时，表格不会显示出来

下面是代码文件和屏幕截图：

index.html

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------

var istableCreated = false;
var email, password,IDvalue=0;
document.querySelector(".loginbtn").addEventListener("click", (e) => {
    email = document.querySelector(".email").value;
    password = document.querySelector(".password").value;

    document.querySelector(".labelemailerror").innerHTML = "";
    document.querySelector(".labelpassworderror").innerHTML = "";

    // ------------TESTING CODE FOR CHECKING VALIDATION AND PRINTING ERROR ON LABELS IF ANY-------------

    if (email === "admin@wimbledon.com" && password === "rogerfederer") {
        console.log("Login successfull....");
        window.open("profile.html");
    }
    else if (email === "" && password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Email and Password cannot be blank"
    }
    else if (email === "") {

        document.querySelector(".labelemailerror").innerHTML = "Email cannot be blank";
    }
    else if (password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Password cannot be blank"
    }
    else {

        document.querySelector(".labelpassworderror").innerHTML = "Invalid Email or Password";
    }

    console.log(email, password);
    e.preventDefault();
});





//------------------------------------MANAGE PLAYERS PAGE----------------------------------

//--------------------------------TESTING CODE FOR SHOWING PLAYERS OF MANAGE PLAYERS PAGE--------------------------
function showplayers() {
    document.querySelector(".customerregistration").innerHTML="";

    if (istableCreated == false) {


        istableCreated = true;
        console.log(istableCreated);

        //----------TESTING CODE FOR CREATING WRAPPER FOR BOOTSTRAP TABLE FOR RESPONSIVENESS--------

        var myDiv = document.createElement("div");
        myDiv.className = "table-responsive";
        myDiv.id = "table-responsive";
        myDiv.style.display="inline-block";
        document.body.appendChild(myDiv);

        //-----------TESTING CODE FOR CREATING BOOTSTRAP DYNAMIC TABLE USING JAVASCRIPT-------------

        var myTable = document.createElement("table");
        myTable.style.marginTop = "2%";
        myTable.className = "table";
        myTable.id = "table";
        document.body.appendChild(myDiv).appendChild(myTable);


        var myThead = document.createElement("thead");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead);

        var myTr = document.createElement("tr");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr);

        var myThID = document.createElement("th");
        myThID.scope = "col";
        myThID.innerHTML = "ID";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThID);

        var myThName = document.createElement("th");
        myThName.scope = "col";
        myThName.innerHTML = "Name";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThName);

        var myThGender = document.createElement("th");

        myThGender.scope = "col";
        myThGender.innerHTML = "Gender";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThGender);

        var mySubscription = document.createElement("th");
        mySubscription.scope = "col";
        mySubscription.innerHTML = "Subscription";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(mySubscription);

        var myfeeStatus = document.createElement("th");
        myfeeStatus.scope = "col";
        myfeeStatus.innerHTML = "Fee Status";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myfeeStatus);

    }
    else {
        console.log(istableCreated);
    }
}



//---------------------TESTING CODE FOR DISPLAYING TABLE FOR ADDING CUSTOMER INFORMATION--------------- 


function addplayers() {
    console.log("add players clicked.....");
    document.querySelector(".customerregistration").style.display = "block";
    IDvalue+=1;
    // document.querySelector(".ID").value=IDvalue;

}



//--------------------------TESTING CODE FOR SAVING CUSTOMER INFORMATION OF MANAGE PLAYERS PAGE-----------------------------



function save() {
    console.log("data saved successfully...");
    return false;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Players</title>

    <!-- ADDING FONT AWESOME CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- ADDING BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- ADDING STYLE.CSS -->
    <link rel="stylesheet" href="/css/style.css">

</head>

<body class="managePlayers">

    <!-- ADDING BUTTONS LIKE SHOW PLAYERS, ADD PLAYERS USING CSS BOOTSTRAP -->
    <button type="button" class="btn btn-secondary showplayers" onclick="showplayers();">Show Players</button>
    <button type="button" class="btn btn-secondary addplayers" onclick="addplayers()">Add Players</button>

    <!-- CREATING REGISTRATION FORM OF CUSTOMER -->
    <table class="customerregistration">
        <tr>
            <td>
                <Label>ID :</Label>
            </td>
            <td>
                <input type="text" class ="ID" readonly>
            </td>
        </tr>
        <tr>
            <td>
                <label>DOB :</label>
            </td>
            <td>
                <input type="date" id="birthday" name="birthday">
            </td>
        </tr>
        <tr>
            <td>
                <label>NAME :</label>
            </td>
            <td>
                <input type="text" class="name" id="name">
            </td>
        </tr>

        <tr>
            <td>
                <label>GENDER :</label>
            </td>
            <td>
                <input type="radio" name="gender" value="female"> Female
                <input type="radio" name="gender" value="male"> Male
            </td>
            
        </tr>

        <tr>
            <td>
                <label>CONTACT :</label>
            </td>
            <td>
                <input type="text" class="customercontact" id="customercontact">
            </td>
        </tr>
        
        <tr>
            <td>
                <label>ADDRESS :</label>
            </td>
            <td>
                <textarea class="address" id="address" cols="20" rows="3"></textarea>
            </td>
        </tr>

        <tr>
            <td>
                <label>ID PROOF :</label>
                <select class="idproof" id="idproof">
                    <option value="select">---Select---</option>
                    <option value="license">License</option>
                    <option value="aadhaar">Aadhaar</option>
                    <option value="passport">Passport</option>
                </select>
            </td>
            <td>
                <input type="text" class="idprooftextbox">
            </td>
        </tr>

        <tr>
            <td>
                <label>MEMBERSHIP FOR :</label>
            </td>
            <td>
                <select class="membershipfor" id="membershipfor">
                    <option value="select">---Select---</option>
                    <option value="court">COURT</option>
                    <option value="tournament">TOURNAMENT</option>
                    <option value="both">BOTH</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <label>MEMBERSHIP TYPE :</label>
            </td>
            <td>
                <select class="membershiptype" id="membershiptype">
                    <option value="select">---Select---</option>
                    <option value="monthly">MONTHLY</option>
                    <option value="halfyearly">HALF YEARLY</option>
                    <option value="annually">ANNUALLY</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-success save">SAVE</button>
            </td>
        </tr>
    </table>

    <!-- ADDING BOOTSTRAP JS -->
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <!-- ADDING INDEX.JS -->
    <script src="/js/sidebar.js"></script>
    <script src="/js/index.js"></script>

</body>

</html>
managePlayers.html

// --------------TESTING CODE FOR LOGIN PAGE LOGIN BUTTON CLICK----------------

var istableCreated = false;
var email, password,IDvalue=0;
document.querySelector(".loginbtn").addEventListener("click", (e) => {
    email = document.querySelector(".email").value;
    password = document.querySelector(".password").value;

    document.querySelector(".labelemailerror").innerHTML = "";
    document.querySelector(".labelpassworderror").innerHTML = "";

    // ------------TESTING CODE FOR CHECKING VALIDATION AND PRINTING ERROR ON LABELS IF ANY-------------

    if (email === "admin@wimbledon.com" && password === "rogerfederer") {
        console.log("Login successfull....");
        window.open("profile.html");
    }
    else if (email === "" && password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Email and Password cannot be blank"
    }
    else if (email === "") {

        document.querySelector(".labelemailerror").innerHTML = "Email cannot be blank";
    }
    else if (password === "") {

        document.querySelector(".labelpassworderror").innerHTML = "Password cannot be blank"
    }
    else {

        document.querySelector(".labelpassworderror").innerHTML = "Invalid Email or Password";
    }

    console.log(email, password);
    e.preventDefault();
});





//------------------------------------MANAGE PLAYERS PAGE----------------------------------

//--------------------------------TESTING CODE FOR SHOWING PLAYERS OF MANAGE PLAYERS PAGE--------------------------
function showplayers() {
    document.querySelector(".customerregistration").innerHTML="";

    if (istableCreated == false) {


        istableCreated = true;
        console.log(istableCreated);

        //----------TESTING CODE FOR CREATING WRAPPER FOR BOOTSTRAP TABLE FOR RESPONSIVENESS--------

        var myDiv = document.createElement("div");
        myDiv.className = "table-responsive";
        myDiv.id = "table-responsive";
        myDiv.style.display="inline-block";
        document.body.appendChild(myDiv);

        //-----------TESTING CODE FOR CREATING BOOTSTRAP DYNAMIC TABLE USING JAVASCRIPT-------------

        var myTable = document.createElement("table");
        myTable.style.marginTop = "2%";
        myTable.className = "table";
        myTable.id = "table";
        document.body.appendChild(myDiv).appendChild(myTable);


        var myThead = document.createElement("thead");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead);

        var myTr = document.createElement("tr");
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr);

        var myThID = document.createElement("th");
        myThID.scope = "col";
        myThID.innerHTML = "ID";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThID);

        var myThName = document.createElement("th");
        myThName.scope = "col";
        myThName.innerHTML = "Name";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThName);

        var myThGender = document.createElement("th");

        myThGender.scope = "col";
        myThGender.innerHTML = "Gender";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myThGender);

        var mySubscription = document.createElement("th");
        mySubscription.scope = "col";
        mySubscription.innerHTML = "Subscription";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(mySubscription);

        var myfeeStatus = document.createElement("th");
        myfeeStatus.scope = "col";
        myfeeStatus.innerHTML = "Fee Status";
        document.body.appendChild(myDiv).appendChild(myTable).appendChild(myThead).appendChild(myTr).appendChild(myfeeStatus);

    }
    else {
        console.log(istableCreated);
    }
}



//---------------------TESTING CODE FOR DISPLAYING TABLE FOR ADDING CUSTOMER INFORMATION--------------- 


function addplayers() {
    console.log("add players clicked.....");
    document.querySelector(".customerregistration").style.display = "block";
    IDvalue+=1;
    // document.querySelector(".ID").value=IDvalue;

}



//--------------------------TESTING CODE FOR SAVING CUSTOMER INFORMATION OF MANAGE PLAYERS PAGE-----------------------------



function save() {
    console.log("data saved successfully...");
    return false;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Players</title>

    <!-- ADDING FONT AWESOME CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- ADDING BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- ADDING STYLE.CSS -->
    <link rel="stylesheet" href="/css/style.css">

</head>

<body class="managePlayers">

    <!-- ADDING BUTTONS LIKE SHOW PLAYERS, ADD PLAYERS USING CSS BOOTSTRAP -->
    <button type="button" class="btn btn-secondary showplayers" onclick="showplayers();">Show Players</button>
    <button type="button" class="btn btn-secondary addplayers" onclick="addplayers()">Add Players</button>

    <!-- CREATING REGISTRATION FORM OF CUSTOMER -->
    <table class="customerregistration">
        <tr>
            <td>
                <Label>ID :</Label>
            </td>
            <td>
                <input type="text" class ="ID" readonly>
            </td>
        </tr>
        <tr>
            <td>
                <label>DOB :</label>
            </td>
            <td>
                <input type="date" id="birthday" name="birthday">
            </td>
        </tr>
        <tr>
            <td>
                <label>NAME :</label>
            </td>
            <td>
                <input type="text" class="name" id="name">
            </td>
        </tr>

        <tr>
            <td>
                <label>GENDER :</label>
            </td>
            <td>
                <input type="radio" name="gender" value="female"> Female
                <input type="radio" name="gender" value="male"> Male
            </td>
            
        </tr>

        <tr>
            <td>
                <label>CONTACT :</label>
            </td>
            <td>
                <input type="text" class="customercontact" id="customercontact">
            </td>
        </tr>
        
        <tr>
            <td>
                <label>ADDRESS :</label>
            </td>
            <td>
                <textarea class="address" id="address" cols="20" rows="3"></textarea>
            </td>
        </tr>

        <tr>
            <td>
                <label>ID PROOF :</label>
                <select class="idproof" id="idproof">
                    <option value="select">---Select---</option>
                    <option value="license">License</option>
                    <option value="aadhaar">Aadhaar</option>
                    <option value="passport">Passport</option>
                </select>
            </td>
            <td>
                <input type="text" class="idprooftextbox">
            </td>
        </tr>

        <tr>
            <td>
                <label>MEMBERSHIP FOR :</label>
            </td>
            <td>
                <select class="membershipfor" id="membershipfor">
                    <option value="select">---Select---</option>
                    <option value="court">COURT</option>
                    <option value="tournament">TOURNAMENT</option>
                    <option value="both">BOTH</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <label>MEMBERSHIP TYPE :</label>
            </td>
            <td>
                <select class="membershiptype" id="membershiptype">
                    <option value="select">---Select---</option>
                    <option value="monthly">MONTHLY</option>
                    <option value="halfyearly">HALF YEARLY</option>
                    <option value="annually">ANNUALLY</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-success save">SAVE</button>
            </td>
        </tr>
    </table>

    <!-- ADDING BOOTSTRAP JS -->
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

    <!-- ADDING INDEX.JS -->
    <script src="/js/sidebar.js"></script>
    <script src="/js/index.js"></script>

</body>

</html>


管理球员
表演选手
添加玩家
身份证件：
出生日期：
姓名：
性别：
女性
男性
联系人：
地址:
身份证明：
---挑选---
许可证
阿达尔
护照
成员包括：
---挑选---
法庭
比赛
二者都
会员类型：
---挑选---
月刊
半年一次
每年
拯救
屏幕截图

当我点击添加玩家时，没有发生任何事情

有什么解决方案吗？

您应该将输入的
ID
更改为另一个
ID
，然后您的函数只需如下所示

function myfunction()
{
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
    else
        document.getElementById("displaytable").style.display="none";
}
您应该将输入的
ID
更改为另一个
ID
，然后您的函数只需要如下所示

function myfunction()
{
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
    else
        document.getElementById("displaytable").style.display="none";
}
在您使用的
showPlayers（）
方法中
document.querySelector（“.customerregistration”）.innerHTML=“”，因此您添加的玩家表单已完全删除。因此，不使用innerHTML=''；用这样的东西

document.querySelector（'.customerrrgistation'）.style.display=“无”并且当您想要显示它时，使用这个
文档.querySelector（'.customerrrgistation'）.style.display=“block”
在您使用的
showPlayers（）方法中
document.querySelector（“.customerrregistration”）.innerHTML=“”，因此您添加的玩家表单已完全删除。因此，不使用innerHTML=''；用这样的东西

document.querySelector（'.customerrrgistation'）.style.display=“无”并且当您想要显示它时，使用这个
文档.querySelector（'.customerrrgistation'）.style.display=“block”
如果单击了show Player，则需要使用带有id选择器的
tbody
并隐藏
添加播放机
部分，反之亦然。单击show Player时，需要将添加播放机设置为
显示：无

它不能使用现有代码的原因是，您正在使用
innerHTML
，并在单击
showplayers（）
时将其从
DOM
中完全清除

再次单击后，
DOM
将被
addplayer
部分清除，不再存在

现场演示：



/--------------测试登录页面登录按钮的代码单击----------------
var istableCreated=false；
var电子邮件，密码，IDvalue=0；
/*document.querySelector（“.loginbtn”）.addEventListener（“单击”，（e）=>{
email=document.querySelector（“.email”）.value；
密码=document.querySelector（“.password”）.value；
document.querySelector（“.labelemailerror”）.innerHTML=“”；
document.querySelector（“.labelpassworderror”）.innerHTML=“”；
//------用于检查标签上的验证和打印错误（如有）的测试代码-------------
如果（电子邮件==”admin@wimbledon.com“&&password===”罗杰费德勒“）{
console.log（“登录成功…”）；
window.open（“profile.html”）；
}否则如果（电子邮件===“”&密码===“”）{
document.querySelector（“.labelpassworderror”）.innerHTML=“电子邮件和密码不能为空”
}否则如果（电子邮件==“”）{
document.querySelector（“.labelemailerror”）.innerHTML=“电子邮件不能为空”；
}否则如果（密码==“”）{
document.querySelector（“.labelpassworderror”）.innerHTML=“密码不能为空”
}否则{
document.querySelector（“.labelpassworderror”）.innerHTML