5

在我的编码中，我使用 javascript 函数来动态创建 div 及其属性

这是我的html编码

<p >Poll Choice</p>

<input type=hidden name="choicecount" id="choicecount" value="1">

<input type=file name="choiceimg1" value ="Select"  onchange="readURL(this)" style="display:none;">

  <script language="JavaScript" type="text/javascript">

  function HandFileButtonClick()

  {

    document.addpoll.choiceimg1.click();

  }

  function HandleFileButtonClick(val)    
  {   
      var ss=val.name;

      document.forms["addpoll"]

      var n=ss.split("choiceimgs");

      document.forms["addpoll"]["choiceimg" + n[1]].click();
  }

  </script>

    <div>
    <div style="width:400px;height:85px;">
            <div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">  
                <input type="button" onclick="HandFileButtonClick();"  value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">
            </div>
            <div style="float:right;margin-top: 30px;">
                <input type=text name="choicename1" id="firstremove2">

                <input type="button" value="Remove" id="firstremove3" onclick="document.getElementById('imgbg').style.display='none';document.getElementById('firstremove').style.display='none';document.getElementById('viewimg1').style.display='none';document.getElementById('firstremove2').style.display='none';document.getElementById('firstremove3').style.display='none';" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">
            </div>
    </div>
<img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/>

<br />
    </div>
<span id="file" ></span>

<input id="addchoice" type=button value="Add New Entry" onclick="addnew(document.forms['addpoll']['choicecount'].value);">

当用户单击 addnewentry 按钮时，它会调用函数 addnew(count)。计数表示用户添加的选项数。这是该 addpoll 函数的编码 - javascript

<script>
    function addnew(type)
    {

    type=parseInt(type)+1;
    var name="choiceimg"+type;
    var name10="choiceimgs"+type;
    var name1="choicename"+type;
    var name2="viewimg"+type;
    var name3="remover"+type;
    var name4="br"+type;
    var mydiv = document.createElement("div");
    mydiv.setAttribute("id",imgbg);
    mydiv.setAttribute("style","width:110px;height:80px;float:left;text-align:center;border:1px solid #ccc;");
    var text = document.createElement("input");
    text.setAttribute("id", name10);
    text.setAttribute("type", "button");
    text.setAttribute("class", "addmultiple");
    text.setAttribute("style", "width: 190px");
    text.setAttribute("style", "padding-left: 5px;&nbsp;");
    text.setAttribute("value", "Browse");
    text.setAttribute("onclick", "HandleFileButtonClick(this)");
    text.setAttribute("name", name10);
    var textf = document.createElement("input");
    textf.setAttribute("type", "file");
    textf.setAttribute("class", "addmultiple");
    textf.setAttribute("style", "width: 246px");
    textf.setAttribute("style", "display:none;");
    textf.setAttribute("name", name);
    textf.setAttribute("onChange", "readURL(this)");
    var file = document.createElement("input");
    file.setAttribute("type", "text");
    file.setAttribute("name", name1);
    file.setAttribute("style", "margin-top: 60px;");
    var viewimg = document.createElement("img");
    viewimg.setAttribute("src", "#");
    viewimg.setAttribute("id", name2);
    viewimg.setAttribute("width", "85px");
    viewimg.setAttribute("height", "70px");
    viewimg.setAttribute("name", name2);
    viewimg.setAttribute("style", "display:none");
    viewimg.setAttribute("class", "addmultiple");
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "Remove");
    remove.setAttribute("style", "color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;");
    remove.setAttribute("name", name3);
    remove.setAttribute("onclick", "remove(this)");
    var br1 = document.createElement("br");
    br1.setAttribute("id", name4);
    document.forms['addpoll']['choicecount'].value=type;
    var addfile = document.getElementById("file");
    var addtext = document.getElementById("file");
    var view = document.getElementById("file");
    var remove1 = document.getElementById("file");
    var br2 = document.getElementById("file");
    var textf1 = document.getElementById("file");
    var myimgdiv = document.getElementById("file");
    myimgdiv.appendChild(mydiv);
    addtext.appendChild(text);
    addfile.appendChild(file);
    remove1.appendChild(remove);
    view.appendChild(viewimg);
    br2.appendChild(br1);
    textf1.appendChild(textf);

    }

    </script>

我想在这里改变的是，

当 mydiv 附加到文件时，它将 div 作为单独的，图像作为单独的。

由 addnew 函数动态创建的 Div

在上图中，第一组包括带有浏览按钮的框、选择名称的文本框和删除按钮来自表单内的编码。以下三个集合是由 addnew 函数动态添加的。但该框不包括其中的浏览按钮。而且我想要与第一个 div 相同的样式。但是在我花了一整天的时间后，我无法将动态 div 更改为与第一个 div 相同。任何人都可以帮助我解决这个问题。感谢您阅读并帮助我解决这个问题

4

1 回答 1

3

在您的 javascript 函数中需要更改许多内容：

参考，

mydiv.setAttribute("id",imgbg)

imgbg什么都没有，所以创建一个新的唯一变量

var name5="imgbg"+type
mydiv.setAttribute("id",name5)

当您想要附加按钮时，这将允许稍后引用这个特定的 div。

样式，将所有样式放在一起，如下所示：

text.setAttribute("style", "padding-left: 5px;margin-top: 30px;");

Sequencing，只有在您附加了 contains 之后div，您才能将按钮附加到它：

var myimgdiv = document.getElementById("file");
myimgdiv.appendChild(mydiv);
var addtext = document.getElementById(name5);
addtext.appendChild(text);

快速示例：http: //jsfiddle.net/3Sd4W/

于 2012-12-20T07:18:54.100 回答