Question

我有一个现有的div，我想为这个现有的div添加一些新数据（5个跨度）。我使用的方法制作了以下GUI

enter image description here 我希望它在现有div（黑色半透明区域）中显示搜索结果。我的HTML代码是

<title>Search your Friends</title>
<body>
<div class="title">
    GTBIT's Almuni Diary
</div>

<div class="main">
    <form id="myForm" method="POST">
        <input placeholder="Enter some text to search"type="text" class="name" name="query">
        <br>
        <span class="searchby">Search Criteria</span>
        <select name="criteria">
            <option value="name" selected="selected">Search by Name</option>
            <option value="enrno">Search by Enrollment No.</option>
            <option value="email">Search by Email ID</option>
            <option value="phno">Search by Phone No.</option>
        </select>
        <br>
        <input type="button" class="search" value="Search">
    </form>
    <div class="sr">
        Search Results
    </div>
    <div class="dynamicData">
        <div class="header">
            <span class="heading">Name</span>
            <span class="heading">Email ID</span>
            <span class="heading">Enrollment No.</span>
            <span class="heading">Nickname</span>
            <span class="heading">Batch</span>
        </div>
        <div class='dataDiv'>
        </div>
    </div>
</div>

CSS：

body
{
    font-family: "source sans pro";
    font-size: 20px;
    background-image: url("../images/searchbg.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.title
{
    display: none; 
    color: #03C9A9;
    background-color: rgba(0,0,0,0.8);
    padding: 5px;
    font-weight: 500;
    font-size: 54px;
    height: 90px;
    text-align: center;
}

.main
{
    display: none;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgba(0,0,0,0.5);
    padding: 20px;
}

.searchby, input, select
{
    color: white;
    font-family: inherit;
    font-size: 28px;
    display: inline-block;
}
.name
{
    color: black;
    width: 80%;
}
.searchby
{
    margin-top: 40px;
}
select
{
    border: 0px solid white;
    margin-left: 30px;
    margin-right: 30px;
    color: black;
    font-size: 22px;
}
.search
{
    background-color: rgba(0,0,0,0.8);
    color: #03C9A9;
    margin: 0 auto;
    margin-top: 30px;
    padding: 5px;
    display: block;
    border: 0px solid white;
    cursor: pointer;
    font-size: 32px;
}
.name
{
    margin-left: 10px;
    border: 0px solid white;
}

.sr
{
    margin-top: 75px;
    font-family: inherit;
    font-size: 32px;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: #03C9A9;
    margin-bottom: 50px;
}

.dynamicData
{
    width: 98%;
    margin-left: 10px;
    padding: 2px;
    background-color: rgba(0,0,0,0.3);
}

.header
{
    padding: 5px;
    width: 90%;
    text-align: center;
    padding: 5px 0px 5px 0px;
    margin: 0 auto;
}
.heading
{
    background-color: #03C9A9;
    color: white;
    font-family: inherit;
    font-size: 24px;
    height: 30px;
    width: 202px;
    display: inline-block;
    margin-bottom: 10px;
}

.dataDiv
{
    padding: 2px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

.data
{
    font-family: inherit;
    font-size: 24px;
    height: 30px;
    width: 202px;
    display: inline-block;
    margin-bottom: 5px;
    color: black;
    background-color: rgba(255,255,255,0.75);
}

PHP脚本负责添加（在获取数据表格数据库之后）

while($stmt->fetch())
{
    echo "<br>
    <span class='data ndata'>$nm</span>
    <span class='data emaildata'>$em</span>
    <span class='data enrnodata'>$eno</span>
    <span class='data nicknamedata'>$nn</span>
    <span class='data batchdata'>$bt</span>";
}

向现有div添加元素（PHP / JS）

0 个答案: