有這樣一個需求，后臺傳遞資料到jsp頁面，根據資料記錄的不同，在頁面上指定的某個div中自動生成多個div，每個div相對這個父div的坐標是不同的，每個div的坐標來源于后臺傳遞過來的引數，父div的樣式如下
.zuobiao1 {
position: relative;
width: 600px;
height: 600px;
float: left;
background-color: #000000;
margin-left: 430px;
margin-top: -600px;
}
jsp頁面相關代碼如下：
<div id="zuobiao1" class="w3-display-container w3-white w3-border w3-border-black zuobiao1">
<script type="text/javascript">
var num =<%=list.size()+1%>;
var df = document.createDocumentFragment();
<%
for (int i=0;i<list.size();i++){
%>
var better = <%=list.get(i).getBetter()%>;
var worse = <%=list.get(i).getWorse()%>;
var name = <%=list.get(i).getWj_id()%>
var y=better*600;
var x=Math.abs(worse)*600;
var oDiv = document.createElement("div");
var div1 = document.createElement("div");
div1.innerHTML = "name";
div1.style = "position:relative;padding:10px;background-color:#eee;width:104px;height:24px;top:'+y+'px;left:'+x+'px;margin:10px;";
alert('name的值'+name+',better的值'+better+',worse的值'+worse+',x的值'+x+',y的值'+y);
oDiv.appendChild(div1);
df.appendChild(oDiv);
zuobiao1.appendChild(df);
<%
}
%>
</script>
</div>
我的思路是回圈取出所有記錄，以父div為參考，每個生成的div的位置用relative，也就是相對父容器來確定坐標，具體的left和top的值來源于引數x,y，因為父容器的寬和高都是css定義好了的，這里是分別是600px和600px。
現在有幾個問題：
第一，我這個處理的思路是否正確，感覺每個div用relative來定位的話，會不會只是針對上一個div，而不是父容器的定位？
第一，我想在每個生成的div中顯示name的值，現在不能正常顯示
第二，現在生成的div的位置不對，不知道是不是div1.style = "position:relative;padding:10px;background-color:#eee;width:104px;height:24px;top:'+y+'px;left:'+x+'px;margin:10px;";這里的寫法不對，感覺沒有取到x和y的值賦值給left和top。
目前的效果如圖:
期望的效果如圖：
uj5u.com熱心網友回復：
通過firefox除錯查看，回圈生成的div的left和top不存在，也就是說我目前這樣的寫法是不對的，那該如何解決呢？
uj5u.com熱心網友回復：
<script type="text/javascript">var num =<%=list.size()+1%>;
var df = document.createElement("div");
<%
for (int i=0;i<list.size();i++){
%>
var better = <%=list.get(i).getBetter()%>;
var worse = <%=list.get(i).getWorse()%>;
var name = <%=list.get(i).getWj_id()%>
var x=better*600;
var y=Math.abs(worse)*600;
var oDiv = document.createElement("div");
var div1 = document.createElement("div");
div1.innerHTML = name;
//div1.style = "position:absolute;padding:10px;background-color:#eee;width:104px;height:24px;top:'+y+'px;left:'+x+'px;";
div1.style.position='absolute';
div1.style.backgroundColor='blue';
div1.style.color='#fff';
div1.style.width='15px';
div1.style.height='15px';
div1.style.lineHeight='15px';
div1.style.fontSize='12';
div1.style.textAlign='center';
div1.style.top=y+'px';
div1.style.left=x+'px';
alert('name的值'+name+',better的值'+better+',worse的值'+worse+',x的值'+x+',y的值'+y);
oDiv.appendChild(div1);
df.appendChild(oDiv);
zuobiao1.appendChild(df);
<%
}
%>
</script>
最后自己搞定了
uj5u.com熱心網友回復：
var oDiv = document.createElement("div");你這個是父的 難道不應該放在最外面 還是你這個每個子div都要嵌套一個oDivuj5u.com熱心網友回復：
我想問一下如何通過一個輸入框中輸入的坐標來控制div的移動的位置呢轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/78445.html
標籤：HTML(CSS)