通过 javascript 和 jquery 从数据库中检索数据答案

【问题标题】：Retrieve data from database throught javascript & jquery通过 javascript 和 jquery 从数据库中检索数据
【发布时间】：2015-01-20 14:06:45
【问题描述】：

我有以下代码：

var _this = this,
                $div = _this.$div,
                opts = _this.settings,
                $table = $div.find(opts.tableSelector);

var listaCamposAExibir = ["Identificação Direta", "Identificação Indireta", "Total", "REINCIDÊNCIAS COM IDENTIFICAÇÃO DIRETA", "REINCIDÊNCIAS COM IDENTIFICAÇÃO INDIRETA", "Total", "TOTAL DE IDENTIFICAÇÕES N"];

            var i = 0;

            document.write('<table>')

            for (var j = 0; j < list.length; j++) {
                i = 0;
                for (p in list[j]) {
                    if (p === "Nome") {
                        document.write('<tr>');
                        document.write('<td>' + list[j][p] + '</td><td></td>');
                        document.write('</tr>');
                    } else {
                        if(p === "TotalGeral" && list[j].Nome === "Interior"){
                            document.write('<tr>');
                            document.write('<td>' + listaCamposAExibir[i] + 'O INTERIOR</td><td>' + list[j][p] + '</td>');
                            document.write('</tr>');
                        } else {
                            if(p === "TotalGeral" && list[j].Nome === "Metropolitana"){
                                document.write('<tr>');
                                document.write('<td>' + listaCamposAExibir[i] + 'A CAPITAL</td><td>' + list[j][p] + '</td>');
                                document.write('</tr>');
                            } else {
                                document.write('<tr>');
                                document.write('<td>' + listaCamposAExibir[i] + '</td><td>' + list[j][p] + '</td>');
                                document.write('</tr>');
                                i++;
                            }
                        }                       
                    }
                }
            }

            document.write('<tr><td>TOTAL:</td><td>' + (parseInt(list[0].TotalGeral) + parseInt(list[1].TotalGeral)) + '</td></tr>');

            document.write('</table>')

还有下面的html：

<div class="form-list-result resultadosDaPesquisa hidden">
        <div class="form-list-result-header resultadosDaPesquisa hidden">
            <label>Resultado da Pesquisa</label>
        </div>
        <table class="table" width="100%">
        </table>
    </div>

但是当我点击按钮时，表格继续为空，只有

当我使用document.write时，它曾经出现过表格，像这样：

Interior    
Identificação Direta                         2
Identificação Indireta                       3
Total                                        5
REINCIDÊNCIAS COM IDENTIFICAÇÃO DIRETA       1
REINCIDÊNCIAS COM IDENTIFICAÇÃO INDIRETA     1
Total                                        2
TOTAL DE IDENTIFICAÇÕES NO INTERIOR          7
Metropolitana   
Identificação Direta                         3
Identificação Indireta                       2
Total                                        5
REINCIDÊNCIAS COM IDENTIFICAÇÃO DIRETA       1
REINCIDÊNCIAS COM IDENTIFICAÇÃO INDIRETA     1
Total                                        2
TOTAL DE IDENTIFICAÇÕES NA CAPITAL           7
TOTAL:                                       14

在数据库中查询的结果是这样的：

Nome            IdDireta IdIndireta SubTotal RIdDireta RIdIndireta RSubTotal  Total
Interior        2        3          5        1         1           2          7
Metropolitana   3        2          5        1         1           2          7

【问题讨论】：

如果此代码旨在将数据插入到 HTML 中的表格中，我可以看到一个问题。它不会。您的代码只会将表写入页面，不会更新现有表。是这个问题吗？
是的@roryok。是我需要的吗

标签： javascript jquery sql database jquery-ui

【解决方案1】：

您需要将 HTML 放入一个字符串，然后将元素的 innerHTML 属性设置为该字符串。

试试这个

在 html 中为您的表格添加一个 id

<div class="form-list-result resultadosDaPesquisa hidden">
    <div class="form-list-result-header resultadosDaPesquisa hidden">
        <label>Resultado da Pesquisa</label>
    </div>
    <table id="mytable" class="table" width="100%">
    </table>
</div>

把你的javascript改成这个

var _this = this,
    $div = _this.$div,
    opts = _this.settings,
    $table = $div.find(opts.tableSelector);

    var listaCamposAExibir = ["Identificação Direta", "Identificação Indireta", "Total", "REINCIDÊNCIAS COM IDENTIFICAÇÃO DIRETA", "REINCIDÊNCIAS COM IDENTIFICAÇÃO INDIRETA", "Total", "TOTAL DE IDENTIFICAÇÕES N"];

    var i = 0;
    var t = '';
    t += '<table>'

    for (var j = 0; j < list.length; j++) 
    {
        i = 0;
        for (p in list[j]) 
        {
            if (p === "Nome") 
            {
                t += '<tr>';
                t += '<td>' + list[j][p] + '</td><td></td>';
                t += '</tr>';
            } 
            else 
            {
                if(p === "TotalGeral" && list[j].Nome === "Interior")
                {
                    t += '<tr>';
                    t += '<td>' + listaCamposAExibir[i] + 'O INTERIOR</td><td>' + list[j][p] + '</td>';
                    t += '</tr>';
                } 
                else 
                {
                    if(p === "TotalGeral" && list[j].Nome === "Metropolitana")
                    {
                        t += '<tr>';
                        t += '<td>' + listaCamposAExibir[i] + 'A CAPITAL</td><td>' + list[j][p] + '</td>';
                        t += '</tr>';
                    } 
                    else 
                    {
                        t += '<tr>';
                        t += '<td>' + listaCamposAExibir[i] + '</td><td>' + list[j][p] + '</td>';
                        t += '</tr>';
                        i++;
                    }
                }                       
            }
        }
    }

    t += '<tr><td>TOTAL:</td><td>' + (parseInt(list[0].TotalGeral) + parseInt(list[1].TotalGeral)) + '</td></tr>';

    t += '</table>';

    document.getElementById("mytable").innerHTML = t;

【讨论】：