JavaScript

Question

这里是编码新手。我正在创建一个应用程序（见下文），它有 2 个并排的用户输入字段。这些用户输入字段的解析按钮生成 2 个单独的表。表格是垂直放置的，我需要将它们并排放置在用户输入字段的下方。我见过许多解决此问题的方法，但它们都与 html 代码有关。我不知道如何在 JS 中做到这一点。请帮忙！用户输入的示例是：1,2,3,4

realArrayRequest = [];
realArrayResponse = [];

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

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

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
            var cell = document.createElement("td");
            var cellText = document.createTextNode(msg1Req[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){
                var cell = document.createElement("td");
                //cell.setAttribute("contenteditable");
                var cellText = document.createTextNode(msg1ReqType[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);
    body.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<msg1Res.length; i++){ //rows
        var row=document.createElement("tr");

        for (var j=0; j < 3; j++){
            if (j === 0){  //columns
            var cell = document.createElement("td");
            var cellText = document.createTextNode(msg1Res[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){
                var cell = document.createElement("td");
                //cell.setAttribute("contenteditable");
                var cellText = document.createTextNode(msg1ResType[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);
    body.appendChild(tbl); 
    tbl.setAttribute("border", "2");
}


function parseUserInputReq(){
    realArrayRequest=[]; 
    //cleans the array from all previous values entered before running all functions
    var input = document.getElementById("userInputRequest").value;
    var noBracketsStr=input.split(",");

        //pushing results from noBracketsStr into a new array realArray, because it seems that split() does not change the original array(string)
        for(var i = 0; i < noBracketsStr.length; i++){
            realArrayRequest.push(noBracketsStr[i])
        }
  
    generateTableRequest();
}

function parseUserInputRes(){
    realArrayResponse=[]; 
    //cleans the array from all previous values entered before running all functions
    var input = document.getElementById("userInputResponse").value;
    var noBracketsStr=input.split(",");

        //pushing results from noBracketsStr into a new array realArray, because it seems that split() does not change the original array(string)
        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'];

#parseCommandRequest {
    width: 50%;
    float: left;
};

#parseCommandResponse {
    width: 50%;
    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>
   
    <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>

Answer 1

正如您所提到的，有很多不同的方法可以解决这个问题。解决此类问题最常用的方法是使用 CSS。使用您已有的 CSS 实际上有一种非常简单的方法可以实现此目的。您可以在 #parseCommandRequest 和 #parseCommandResponse 中注入表，而不是在正文中注入两个表。为此，您只需将 body.appendChild(tbl); 替换为将它们注入正确的 div 中的代码即可。

这是一种可能的实现方式：

// Replace body.appendChild(tbl); with the following
var parseCommandRequestDiv = document.getElementById("parseCommandRequest");
parseCommandRequestDiv.appendChild(tbl);

// Do the same for the response
var parseCommandResponseDiv = document.getElementById("parseCommandResponse");
parseCommandResponseDiv.appendChild(tbl);

JavaScript - 两个表格并排显示

JavaScript - Two tables displayed side by side

css-tables