只想在这三个div之下创建动态div

时间:2016-03-17 13:41:28

标签: javascript jquery html

我有三个html div。我只想通过调用div来创建相同的addPatientQueryDiv()。这是我的代码:

div id="childRow" class="dynamicDivRow"style="float: left; width: 70%;">
        <div class="pChild-div">
            <span>
                <select id="race" name="race" class="select" disabled="disabled">
                    <option value="0">---Select---</option>
                </select>
            </span>
        </div>
        <div class="pChild-div">
            <span>
                <select id="filter" name="filter" class="select" disabled="disabled">
                    <option value="0">---Select---</option>
                    <option value="=">=</option>
                    <option value="!=">!=</option>
                    <option value="<"><</option>
                    <option value="<="><=</option>
                    <option value=">">></option>
                    <option value=">=">>=</option>
                </select>
            </span>
        </div>
        <div class="pChild-div">
            <input id="birthDate" class="date" type="text"
                    maxlength="10" name="" disabled> 
                    <span>
            <img id="queryDiv" src="/roswellpark/images/details_open.png" onclick="addPatientQueryDiv()">
        </span>
        </div>
        </div>

和css就像

.pChild-div{
width: 15%;
float: left;
height: 90px;
padding: 30px 20px;}

我创建了我的功能

function addPatientQueryDiv (){
console.log("================Working=========");
    var addAfterDivId="#childRow"+count;
    count=count+1;
    $("<div id=\"childRow"+count+"\" class=\"dynamicDivRow\"style=\"padding-top:2%\">"+
                            "<div class=\"pChild-div\"style=\"padding-left:1em\">"+
                                "<select id=\"race"+count+"\" name=\"race\" class=\"select\">"+
                                    "<option value=\"0\">---Select---</option>"+
                                "</select>"+    
                            "</div>"+
                            "<div class=\"pChild\">"+
                                 "<input type=\"text\" id=\"birthDate"+count+"\" class=\"input_date\" maxlength=\"10\"onfocus=\"openDatePicker(this)\">"+   
                            "</div>"+
                            "<span><img id=\"queryDiv"+count+"\" onclick=\"addPatientQueryDiv()\" src=\"/roswellpark/images/details_open.png\"></span>"+
    "</div>").insertAfter(addAfterDivId);
    var htmlContent="";
    $.each(raceList, function(key, val) {
        console.log("====RACENAME=========="+val.raceName);
        htmlContent=htmlContent+"<option value='"+val.raceId+"'>"+val.raceName+"</option>";
    });
    $("#race"+count).append(htmlContent);
    $( "#imaging_date"+count ).datepicker({
        showOn: "button",
        buttonImage: "/roswellpark/images/calendar_icon.png",
        buttonImageOnly: true,
        buttonText: '',
        yearRange: "-100y",
        dateFormat: 'mm/dd/yy',
        changeYear: true,
        changeMonth:true
    });

preventDateFromPaste();

}
但它不起作用,请帮忙。或者告诉我是否有任何简单的方法来解决这个问题? 谢谢。

1 个答案:

答案 0 :(得分:0)

使用您想要的内容制作一个div,然后给它一个类:.childRow

$('.childRow').clone().insertAfter(addAfterDivId);