使用datepicker的动态javascript内容与文本框

时间:2014-08-18 20:57:50

标签: javascript jquery dynamic textbox datepicker

我在使用动态内容(javascript)生成的文本框中的Jquery .datepicker插件时遇到问题,在php页面中。

以下是我目前的代码。请帮我找出如何在其上启用Jquery Datepicker?

**我所需要的只是解释我如何改变“i> 0&& j == 3”文本框创建部分中的代码。

先谢谢你。 (我知道我的代码很糟糕,我是新手!)

<script type="text/javascript">
//Script para gerar os campos para preenchimentos parcelados
function gerarparcelas() {
    // desabilitar botão Gerar parcelas ao rodar este script:
    document.getElementById("gera_parcelas").disabled = true;
    var descr_lancamento_02 = document.getElementById('descr_lancamento_02').value;     //Pegar valor do campo descrição do lançamento
    var valor_lancamento_02 = document.getElementById('valor_lancamento_02').value;     //Pegar valor do campo valor do lançamento (total)  
    var data_vencimento_02 = document.getElementById('data_vencimento_02').value;       //Pegar valor do campo data de vencimento (da 1 parcela)
    var qtde_parcelas = document.getElementById('qtde_parcelas').value;                 //Pegar valor do campo quantidade de parcelas

    //converter o número em REAIS digitado no campo em número americano para o sistema calcular:
    valor_lancamento_02 = valor_lancamento_02.replace(/\./g,"");
    valor_lancamento_02 = valor_lancamento_02.replace(",",".");

    // vamos criar o elemento HTML table
    var tabela = document.createElement("table");
    tabela.width = "750px";
    tabela.id = "table_parcela"
    tabela.height = "250px";
    tabela.border = "1px";
    tabela.cellSpacing = "0px";
    tabela.cellPadding = "2px";

    // vamos criar o corpo da tabela, ou seja, o tbody 
    var corpo = document.createElement("tbody");
    tabela.appendChild(corpo);

    var linhas = qtde_parcelas;
    linhas++;

    // vamos criar quatro linhas contendo quatro células cada uma
    for(var i = 0; i < linhas; i++){
        var linha = corpo.insertRow(-1);

        for(var j = 0; j < 4; j++){
         var celula = linha.insertCell(-1);

            if (i == 0 && j == 0) {
                celula.innerHTML =  "<td class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong></p>";
            } else if (i == 0 && j == 1) {
                celula.innerHTML =  "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Descrição do lançamento</strong></p>";
            } else if (i == 0 && j == 2) {          
                celula.innerHTML =  "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Valor R$</strong></p>";            
            } else if (i == 0 && j == 3) {          
                celula.innerHTML =  "<p class='corpo_padrao align='center' valign='middle' bgcolor='#D3D3D3'><strong>Vencimento</strong></p>";
            }

             if (i > 0 && j == 0) {
                id = i;
                celula.innerHTML = id;
             }       
             if (i > 0 && j == 1) {
                celula.innerHTML = descr_lancamento_02;
                celula.innerHTML="<input type='text' value='" +celula.innerHTML + " - " + id + "/" + qtde_parcelas + "' id='parcelamento_" + i +"_"+ j +"' size='55'>";
             }
             if (i > 0 && j == 2) {
                celula.innerHTML = valor_lancamento_02;
                var parcela = celula.innerHTML / qtde_parcelas;

                // Reconvertendo o número de U$ para R$
                var int = parseInt(parcela.toFixed(2).toString().replace(/[^\d]+/g, ''));
                var tmp = int + '';
                tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
                if (tmp.length > 6)
                tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
                if (tmp.length > 9)
                    tmp = tmp.replace(/([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g,".$1.$2,$3");
                if (tmp.length > 12)
                    tmp = tmp.replace(/([0-9]{3}).([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g,".$1.$2.$3,$4");
                if(tmp.indexOf(".") == 0) tmp = tmp.replace(".","");
                if(tmp.indexOf(",") == 0) tmp = tmp.replace(",","0,");
                parcela = tmp;
                // Fim da reconversão de moeda

                celula.innerHTML="<input type='text' value='" + parcela + "' id='parcelamento_" + i +"_"+ j +"'>";
             }
             if (i > 0 && j == 3) {

                // criar campo textbox com jquery para Datepicker:
                celula.innerHTML = data_vencimento_02;
                var $textbox_id = "parcelamento_" + i + "_" + j;

                celula.innerHTML = "<input type='text' value='" + celula.innerHTML + "' id='" + $textbox_id + "'>";

                $txtdatabox = celula.innerHTML;             
                $txtdatabox.datepicker();           //This line should be calling the plugin to have the new created textbox above to use Jquery?
             }       
        }
    }

    // vamos anexar a tabela recém-criada a um elemento div
    var $container = document.getElementById("container");
    $container.appendChild(tabela);
    $container.datepicker();             //Also tried this line to add Datepicker plugin...
}  
</script>

1 个答案:

答案 0 :(得分:0)

您无法在正文标记上调用日期选择器。您可以在所有代码的末尾执行

$(".dtp").each(function() {
  $(this).datepicker();
}

如果您输入class="dtp"