时间戳

首页 > 解决方案 > 如何在调用创建表的函数之前检查表是否显示 - JavaScript

javascript - 如何在调用创建表的函数之前检查表是否显示 - JavaScript

问题描述

我是一个新的编码员。我创建了一个简单的应用程序，它将解析用户的输入数据并将其显示在表格中。用户流程如下：

  1. 从下拉菜单中，他们选择要使用的消息（1 登录或 2 注销）
  2. 在请求或响应字段中，他们输入如下所示的数据：1,2,3,4,5
  3. 按 Parse 并查看其数据显示在表格中。我的问题是，如果用户多次按下 Parse 按钮​​，表格会不断增加。如何修改我的代码以检查表是否已显示，如果已显示，则在运行创建表的代码之前删除/隐藏它？请帮忙！

这是代码片段：

function goToNewPage(src){
    window.location = src;
}

realArrayRequest = [];
realArrayResponse = [];

function generateTableRequest(){

    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    //var input = parseUserInputReq();


    for(var i=0; i<realArrayRequest.length; i++){ //rows
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
                if(getDropDownValue() === "1 Log In"){ 
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg1Req[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                } else if (getDropDownValue() === "2 Log Out"){ 
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg2Req[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                };
            } else if (j === 1){
                var cell = document.createElement("td");
                var cellText = document.createTextNode(realArrayRequest[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else if (j === 2){
                if (getDropDownValue() === "1 Log In"){
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg1ReqType[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                } else if (getDropDownValue() === "2 Log Out"){
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg2ReqType[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                } 
    }
            
     tblBody.appendChild(row);
    }

    tbl.appendChild(tblBody);

    var parseCommandRequestDiv = document.getElementById("parseCommandRequest");
    parseCommandRequestDiv.appendChild(tbl);     
    tbl.setAttribute("border", "2");
}
}



function generateTableResponse(){
    var body = document.body;
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    for(var i=0; i<realArrayResponse.length; i++){ //rows
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
                
                if(getDropDownValue() === "1 Log In"){ 
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg1Res[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                } else if (getDropDownValue() === "2 Log Out"){
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg2Res[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                }
            } else if (j === 1){
                var cell = document.createElement("td");
                var cellText = document.createTextNode(realArrayResponse[i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            } else if (j === 2){
                if (getDropDownValue() === "1 Log In"){
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg1ResType[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                } else {
                    var cell = document.createElement("td");
                    var cellText = document.createTextNode(msg2ResType[i]);
                    cell.appendChild(cellText);
                    row.appendChild(cell)
                    };
            } else {  
                var cell = document.createElement("td");
                var cellText = document.createTextNode('');
                cell.appendChild(cellText);
                row.appendChild(cell);
        } 
            
        }
     tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    var parseCommandResponseDiv = document.getElementById("parseCommandResponse");
    parseCommandResponseDiv.appendChild(tbl); 
    tbl.setAttribute("border", "2");
}


 function getDropDownValue (){ //getting the text from the drop down menu
    var selectElement = document.getElementById("dropDownMessageMenu");
    var selectValue = selectElement.options[selectElement.selectedIndex].text;
    return selectValue;
};


function parseUserInputReq(){
    realArrayRequest=[]; 
    
    var input = document.getElementById("userInputRequest").value;
    var noBracketsStr=input.split(",");

        for(var i = 0; i < noBracketsStr.length; i++){
            realArrayRequest.push(noBracketsStr[i])
        }
  
    generateTableRequest();
}

function parseUserInputRes(){
    realArrayResponse=[]; 
    var input = document.getElementById("userInputResponse").value;
    var noBracketsStr=input.split(",");

        for(var i = 0; i < noBracketsStr.length; i++){
            realArrayResponse.push(noBracketsStr[i])
        }
  
    generateTableResponse();
}






//Message elements

//Message 1
const msg1Req = ['Login Command', 'version', 'xID', 'passcode', 'machineID', 'equipment Serial Number', 'userSlot', 'clubID', 'loginType'];
const msg1ReqType = ['integer', 'integer', 'string', 'string', 'string', 'string', 'integer', 'integer', 'string'];
const msg1Res = ['Login Command', 'Version', 'Result', 'User token'];
const msg1ResType = ['integer', 'integer', 'integer', 'string'];
//Message 2
const msg2Req = ['Logout Command', 'Version', 'User Token', 'Machine ID'];
const msg2ReqType = ['integer', 'integer', 'string', 'string'];
const msg2Res = ['Logout Command', 'Version', 'Result', 'Error message on failure'];
const msg2ResType = ['Integer', 'Integer', 'Integer', 'string']
#parseCommandRequest {
    width: 40%;
    float: left;
};

#parseCommandResponse {
    width: 60%;
    float: left;
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="styles.css">
        <script defer type="text/javascript" src="index.js" charset="UTF-8"></script>
</head>
<body>
    <br><br>
    <div>
        Select a message you want to parse
        <select name="dropDownMessageMenu" id="dropDownMessageMenu">
            <option value="msg0" disabled selected></option>
            <option value="msg1">1 Log In</option>
            <option value="msg2">2 Log Out</option>
           
        </select> <br> <br>
    </div>
    <div id="parseCommandRequest">
        <form name="userInputReq">
            Request 
            <input type="text" id="userInputRequest"> 
            <input type="button" value="Parse" onclick="parseUserInputReq()">
        </form>
    </div>
    <div id="parseCommandResponse">
        <form name="userInputRes">
            Response 
            <input type="text" id="userInputResponse"> 
            <input type="button" value="Parse" onclick="parseUserInputRes()">
        </form>
    </div>


</body>
</html>

标签： javascript

解决方案

您可以使用 id 创建表并检查表是否已创建。如果表已经创建，您需要将行插入到已经存在的表中。

推荐阅读