Fatal编程技术网
  • javascript/
  • Javascript 将搜索结果放入表js

Javascript 将搜索结果放入表js

javascript css html

Javascript 将搜索结果放入表js,javascript,css,html,Javascript,Css,Html,因此，目前我的应用程序使用document.write向用户提供搜索结果，但我希望结果在中的表格中输出给用户，但我不希望表格仅在开始时给出结果时才被看到，如何做到这一点？提前感谢您的帮助！：） HTML: JS: 功能电话合同（品牌、型号、网络、分钟、文本、数据、升级成本、月成本、长度）{ 这个。品牌=品牌； 这个模型=模型； 这个。网络=网络； 这个。分钟=分钟； 这个。文本=文本； 这个。数据=数据； 这个.upcost=upcost； this.monthlycost=monthlyco

因此，目前我的应用程序使用
document.write
向用户提供搜索结果，但我希望结果在
中的表格中输出给用户，但我不希望表格仅在开始时给出结果时才被看到，如何做到这一点？提前感谢您的帮助！：）

HTML:

JS:

功能电话合同（品牌、型号、网络、分钟、文本、数据、升级成本、月成本、长度）{
这个。品牌=品牌；
这个模型=模型；
这个。网络=网络；
这个。分钟=分钟；
这个。文本=文本；
这个。数据=数据；
这个.upcost=upcost；
this.monthlycost=monthlycost；
这个。长度=长度；
}
var合约=[]；
合同推送（新电话合同（“摩托罗拉”、“StarTAC”、“Z-Mobile”、“300”、“3500”、“不适用”、“0”、“5”、“24”））；
合同推送（新电话合同（“诺基亚”、“3310”、“O3”、“100”、“5000”、“不适用”、“0”、“2”、“24”））；
合同推送（新的电话合同（“苹果”、“iPhone5C”、“福达丰”、“300”、“无限”、“250MB”、“0”、“22”、“24”））；
合同推送（新电话合同（“苹果”、“iPhone5C”、“NN”、“1000”、“无限”、“2GB”、“49”、“34”、“18”））；
合同推送（新电话合同（“三星”、“银河S5”、“O3”、“500”、“无限”、“500MB”、“0”、“24”、“24”））；
合同推送（新的电话合同（“三星”、“Galaxy S5”、“Fodavone”、“600”、“无限”、“1GB”、“0”、“27”、“24”））；
合同推送（新电话合同（“LG”、“G3”、“NN”、“1000”、“无限”、“1GB”、“0”、“31”、“24”））；
合同推送（新电话合同（“诺基亚”、“Lumia 925”、“Fodavone”、“600”、“无限”、“500MB”、“0”、“27”、“18”））；
合同推送（新电话合同（“LG”、“Optimus L7 2”、“NN”、“250”、“5000”、“500MB”、“0”、“12”、“24”））；
合同推送（新电话合同（“索尼”、“Xperia Z3”、“O3”、“无限”、“无限”、“1GB”、“79”、“38”、“24”））；
合同推送（新电话合同（“索尼”、“Xperia Z3”、“NN”、“无限”、“无限”、“10GB”、“0”、“44”、“24”））；
功能检查品牌（）{
var电话
var-brandCheck；
phone=document.getElementsByClassName（“phone”）；
对于（变量i=0；i 0）{
风险值百分比匹配=100*（匹配/条件总数）；
文件.编写（合同[p].品牌+
“”+合同[p]。模型+
“”+合同[p]。网络+
“+合同[p].分钟+
“+合同[p]。文本+
“”+合同[p]。数据+
“”+合同[p]。升级成本+
“+合同[p]。月成本+
“”+合同[p]。长度+
“+匹配百分比+”%
”；
}
}
}
默认情况下，在表格上设置
显示：无
，并在找到结果时将其设置为
显示：块
。您可以在元素上设置
diplay:none
内联，并在函数“search（）”中的if语句
if（matches>0）

中使用javascript对其进行更改，就在“for”循环之前，声明一个变量“searchResult”，然后将每个结果行连接到此变量中。最后，将结果放入“main”div：

函数搜索（）{
var brandCheck=checkBrand（）；
var networkCheck=checkNetwork（）；
var模型
model=document.getElementById（“手机型号”）；/？？？
变量f
f=document.getElementById（“internet”）；//复选框
变量g
g=document.getElementById（“upcost”）；//自动
var h
h=document.getElementById（“月成本”）；//自动询问
变量i
i=document.getElementById（“合同长度”）；//下拉列表
//声明searchResult变量
var searchResult=“”；
对于（var p=0；p=contract[p].minutes）匹配项+=1；
如果（文本>=合同[p].text）匹配+=1；
如果（f.value==contract[p].data）匹配+=1；
如果（g.value==contract[p].upcost）匹配+=1；
如果（h.value==contract[p].monthlycost）匹配+=1；
如果（i.value==contract[p].length）匹配+=1；
如果（匹配项>0）{
风险值百分比匹配=100*（匹配/条件总数）；
//表格结果的连续行
搜索结果+=“”+合同[p]。品牌+
“”+合同[p]。模型+
“”+合同[p]。网络+
“+合同[p].分钟+
“+合同[p]。文本+
“”+合同[p]。数据+
“”+合同[p]。升级成本+
“+合同[p]。月成本+
“”+合同[p]。长度+
“+匹配百分比+”；
}
}
//检查是否有结果
如果（搜索结果！=“”）{
searchResult=“”+searchResult+”；
}
//将结果放入主div
document.getElementsByClassName（'main'）[0].innerHTML=searchResult；
}
好的，我已经得到了那个代码，但如果我选择Sony，例如，输出是SonyPeria Z3O3UnlimitedUnlimitedUnlimited1GB79382410%SonyPeria Z3UnlimitedUnlimitedUnlimited10GB042410%，它在空白页而不是div类上执行，这是此行的重点：document.getElementsByClassName（'main'）[0]。innerHTML=searchResult；嗯，是的，我确实有那一行，但它仍然不能正常工作，你必须用“搜索结果+=”替换“document.write”（“document.write”）？哦，不，我没有，现在我删除了那一行，我选择了“Sony”并按下按钮，什么都没有发生 
<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head> <!-- standard html tag -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    </script>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
    <title>Any Phone4You</title>
</head>
<body>
<header class="header">
<h1>Any Phone4You</h1>
</header>
<div class="main">
</div>
<div class="search">
    <form>
        <fieldset>
            <legend>Select phone brand</legend>
            <label for="sony">Sony</label>
            <input type="radio" name="brand" class="phone" value="Sony">
            <label for="motorola">Motorola</label>
            <input type="radio" name="brand" class="phone" value="Motorola">
            <label for="samsung">Samsung</label>
            <input type="radio" name="brand" class="phone" value="Samsung">
            <label for="apple">Apple</label>
            <input type="radio" name="brand" class="phone" value="Apple">
            <label for="lg">LG</label>
            <input type="radio" name="brand" class="phone" value="LG">
        </fieldset>
        <label for="phone_model">Model</label>
        <input type="text" id="phone_model" />
        <fieldset>
            <legend>Select a network</legend>
            <label for="zmobile">Z-Mobile</label>
            <input type="radio" name="net" class="network" value="Z-Mobile">
            <label for="o3">O3</label>
            <input type="radio" name="net" class="network" value="O3">
            <label for="fodavone">Fodavone</label>
            <input type="radio" name="net" class="network" value="Fodavone">
            <label for="nn">NN</label>
            <input type="radio" name="net" class="network" value="NN">
        </fieldset>
        <input type="range" name="rating" min="0" max="1000" value="0" step="50" id="range.slider" />
        <span id="range">0</span><br /><br />
        <input type="checkbox" name="check.minutes" id="check.text" value="Unlimited">Unlimited
        <input type="range" name="rat" min="0" max="5000" value="0" step="100" id="slider.range" />
        <span id="rata">0</span>
        <input type="checkbox" name="check.text" id="check.text" value="Unlimited">Unlimited
        <label for="internet">Data</label>
        <input type="text" id="internet" />
        <label for="upcost">Upfront Cost</label>
        <input type="number" id="upcost" />
        <label for="month_cost">Monthly Cost</label>
        <input type="number" id="month_cost" />
        <label for="contract_length">Contract Length</label>
        <input type="number" id="contract_length" />
        <input type="button" value="click me" id="search">
    </form>
</div>
<footer>@Copyright Reserved by Przemyslaw Wojtas @2015-2016 !Do not copy!</footer>
    <script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

html{
 margin: 0;
 padding: 0;
}
body{
    margin: 0;
    padding: 0;
}
.margin{
    margin-left: auto;
    margin-right: auto;
}
.textalign{
    text-align: left;
}
.textalign2{
    text-align: center;
}
.header{
    top: 2%;
    height: 20%;
    width: 100%;
    background-color: rgb(39,133,203);
    color: white;
    font-size: 36px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    display: inline-block;

}
h1{
    left: 5%;
    padding-top: 1%;
    padding-left: 1%;
    margin: 0;
}
.main{
    float: right;
    width: 80%;
    height: 850px;
    background-color: rgb(98,204,255);
}
footer{
    clear: both;
    bottom: 0px;
    width: 100%;
    font-family: 'Yanone Kaffeesatz', sans-serif; 
}
fieldset{
    display: block;
}
form{
        font-size: 16px;
    width:100%;
        border: 1px solid;
    box-shadow: 10px 10px 5px #000000;
    background-color:rgba(255,255,255,0.4);
}/* this will style my form */
input, select, textarea{
        display: block;
        margin:2%;
}/* this style all input, select and textarea tags */
input{
    border:2px solid #CCC;
    width: 70%;
        margin-top: 2%;
}/* further styling to input tag */
textarea{
    width:50%;
    border:3px solid #CCC;
}/* further styling to textarea tag */

.search{
    overflow-y: scroll;
    height: 850px;
    float: left;
    width: 20%;
    background-color: rgb(39,133,203);
    opacity: 0.9;
}

function phoneContract(brand, model, network, minutes, texts, data, upcost, monthlycost, length) {
    this.brand=brand;
    this.model=model;
    this.network=network;
    this.minutes=minutes;
    this.texts=texts;
    this.data=data;
    this.upcost=upcost;
    this.monthlycost=monthlycost;
    this.length=length;
}
var contract=[];
contract.push(new phoneContract("Motorola", "StarTAC", "Z-Mobile", "300", "3500", "N/A", "0", "5", "24"));
contract.push(new phoneContract("Nokia", "3310", "O3", "100", "5000", "N/A", "0", "2", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "Fodavone", "300", "Unlimited", "250MB", "0", "22", "24"));
contract.push(new phoneContract("Apple", "iPhone 5C", "NN", "1000", "Unlimited", "2GB", "49", "34", "18"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "O3", "500", "Unlimited", "500MB", "0", "24", "24"));
contract.push(new phoneContract("Samsung", "Galaxy S5", "Fodavone", "600", "Unlimited", "1GB", "0", "27", "24"));
contract.push(new phoneContract("LG", "G3", "NN", "1000", "Unlimited", "1GB", "0", "31", "24"));
contract.push(new phoneContract("Nokia", "Lumia 925", "Fodavone", "600", "Unlimited", "500MB", "0", "27", "18"));
contract.push(new phoneContract("LG", "Optimus L7 2", "NN", "250", "5000", "500MB", "0", "12", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "O3", "Unlimited", "Unlimited", "1GB", "79", "38", "24"));
contract.push(new phoneContract("Sony", "Xperia Z3", "NN", "Unlimited", "Unlimited", "10GB", "0", "44", "24"));

function checkBrand(){
    var phone
    var brandCheck;
    phone = document.getElementsByClassName("phone");
    for (var i=0;i<phone.length;i++) {
        console.log(phone[i].checked)
        if (phone[i].checked == true) {
            brandCheck = phone[i].value;
        }   
    }
    return brandCheck;
}

function checkNetwork(){
    var network
    var networkCheck
    network = document.getElementsByClassName("network");
    for (var i=0;i<network.length;i++) {
        console.log(network[i].checked)
        if (network[i].checked == true) {
        networkCheck = network[i].value;
        }
    }
    return networkCheck;
}
var button = document.getElementById("search");
button.addEventListener("click", search, false);
var minutes
function slidefunction() {
    minutes = parseInt(slider.value)
    document.getElementById("range").innerHTML = minutes + " Minutes";
}
var slider = document.getElementById("range.slider");
slider.addEventListener("change", slidefunction, false);

var text
function slid() {
    text = parseInt(sli.value)
    document.getElementById("rata").innerHTML = text + " Text";
}
var sli = document.getElementById("slider.range");
sli.addEventListener("change", slid, false);

function search() {
 var brandCheck=checkBrand();
 var networkCheck=checkNetwork();
var model
model = document.getElementById("phone_model"); //???
var f
f = document.getElementById("internet"); //checkbox
var g
g = document.getElementById("upcost");  //auto
var h
h = document.getElementById("month_cost"); //auto ask
var i
i = document.getElementById("contract_length"); //dropdown
    for (var p=0;p<contract.length;p++) {
        var matches = 0;
var total_number_of_conditions = 10;

if (brandCheck == contract[p].brand) matches += 1;
if (model.value == contract[p].model) matches += 1;
if (networkCheck == contract[p].network) matches += 1;
if (minutes >= contract[p].minutes) matches += 1;
if (text >= contract[p].texts) matches += 1;
if (f.value == contract[p].data) matches += 1;
if (g.value == contract[p].upcost) matches += 1;
if (h.value == contract[p].monthlycost) matches += 1;
if (i.value == contract[p].length) matches += 1;

if (matches > 0) {
    var percentage_matched = 100 * (matches / total_number_of_conditions);
    document.write(contract[p].brand + 
        " " + contract[p].model + 
        " " + contract[p].network + 
        " " + contract[p].minutes + 
        " " + contract[p].texts + 
        " " + contract[p].data + 
        " " + contract[p].upcost + 
        " " + contract[p].monthlycost + 
        " " + contract[p].length + 
        " " + percentage_matched + "% </br>");   
}
    }
        }

    function search() {
var brandCheck=checkBrand();
 var networkCheck=checkNetwork();
var model
model = document.getElementById("phone_model"); //???
var f
f = document.getElementById("internet"); //checkbox
var g
g = document.getElementById("upcost");  //auto
var h
h = document.getElementById("month_cost"); //auto ask
var i
i = document.getElementById("contract_length"); //dropdown
// Declare your searchResult variable        
var searchResult = "";
        for (var p=0;p<contract.length;p++) {
        var matches = 0;
var total_number_of_conditions = 10;

if (brandCheck == contract[p].brand) matches += 1;
if (model.value == contract[p].model) matches += 1;
if (networkCheck == contract[p].network) matches += 1;
if (minutes >= contract[p].minutes) matches += 1;
if (text >= contract[p].texts) matches += 1;
if (f.value == contract[p].data) matches += 1;
if (g.value == contract[p].upcost) matches += 1;
if (h.value == contract[p].monthlycost) matches += 1;
if (i.value == contract[p].length) matches += 1;
    if (matches > 0) {
        var percentage_matched = 100 * (matches / total_number_of_conditions);
// Concatene lines of the table result
        searchResult += "<tr><td>" + contract[p].brand + 
            "</td><td>" + contract[p].model + 
            "</td><td>" + contract[p].network + 
            "</td><td>" + contract[p].minutes + 
            "</td><td>" + contract[p].texts + 
            "</td><td>" + contract[p].data + 
            "</td><td>" + contract[p].upcost + 
            "</td><td>" + contract[p].monthlycost + 
            "</td><td>" + contract[p].length + 
            "</td><td>" + percentage_matched + "%</td></tr>";   
    }
        }
// Check if there is result
    if(searchResult != ""){
        searchResult = "<table>" + searchResult + "</table>";
    }
// Put the result in the main div
    document.getElementsByClassName('main')[0].innerHTML = searchResult;
            }