Question

我有一个JavaScript（我不是专家）可以将我通过Python服务执行的查询返回到Mongodb数据库。

该查询采用以下几种现成格式

[{CHAIN：“ STREET ELM，ELMER”，代码：“ 1234”}，{CHAIN：“ STREET LM，LMAO”，代码：“ 5678”}]

我看到的解决方案是创建一个表，该表返回该结果以将其显示给用户。我必须做一些修改：

一种方法是返回数据库的完整游标，直到现在只返回我在HTML中编写的字符串，但是在数据库中，我做了一种LIKE，它返回包含该字符串的所有字符串。也就是说，当我编写LM时，数据库返回了上一个列表，但是在HTML中我只能得到

{链：“ STREET LM，LMAO”，代码：“ 5678”}

我要做的第二件事是修改当我单击该表的元素时出现的窗口。在点击表格之前，我得到了结果

LMAO的STREET STREET LM

但是现在，除了字符串的结果外，我还必须连接代码并显示类似的内容

LM LMAO 5678的STREET STREET

他们会对我如何修改它有一个想法吗？我不知道，而且已经有一段时间没有找到方法了

那是我的代码：

<style>
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
            table td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
</style>

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="cantidad">
        Cantidad de elementos sugeridos:
        <input type="radio" id="10" name="cant" value="10" checked="checked"> 10
        <input type="radio" id="15" name="cant" value="15"> 15
        <input type="radio" id="20" name="cant" value="20"> 20
        </div>
        <div id="country">
        Seleccione País:
        <select name="pais">
        <option value="ARGENTINA" selected="selected">ARGENTINA</option> 
        <option value="PARAGUAY">PARAGUAY</option> 
        <option value="URUGUAY">URUGUAY</option>
        </select>
        </div>
        <br>
        Ingrese la calle a buscar, la localidad, partido/depto.y provincia en cualquier orden.<br>
        Para obtener mejor resultado en la búsqueda, ponga entre comillas los nombres compuestos<br>
        Por ejemplo: "san martin", etc.<br>
        <input id="CHAIN" type="text" placeholder="ingrese el string para buscar una calle" autocomplete="off" size="80"/>
        <table id="table">
            <tbody>
            </tbody>
        </table>
    </body>
</html>

<script type="text/javascript">
    var parsedJSON;
    var ex = document.getElementsByName('pais')[0];
    function actualiza () {
        var selected_pais= ex.options[ex.selectedIndex].text;
            var params = {
                type: 'POST',
                url: 'http://127.0.0.1:5007/suggestStreetName',
                //data: JSON.stringify({ "CHAIN": $("#chain").val() }),
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: function (response) {
                    parsedJSON = JSON.parse(JSON.stringify(response));
                    $("#table tr").remove();
                    var tableRef = document.getElementById('table');
                    for (var i = 0; i < parsedJSON.length; i++) {
                        var newRow   = tableRef.insertRow(0);
                        var newCell  = newRow.insertCell(0);
                        /*newCell.onclick = function () {  tableText(this);  };*/
                        newCell.onclick = function () {  tableText(this);  };
                        var newText  = document.createTextNode(parsedJSON[i].CHAIN);
                        var newText2  = document.createTextNode(parsedJSON[i].CODIGO);
                        newCell.appendChild(newText);
                    }
                    console.log(selected_pais);
                },
                error: function (error) {
                    console.log(error);
                }
            };
        if ($("#chain").val().length > 0) {
            cantidad = "10";
            if (document.getElementById('10').checked) {
                cantidad = "10";
            } else {
                if (document.getElementById('15').checked) {
                    cantidad = "15";
                } else {
                    cantidad = "20";
                }
             };
             if (selected_pais == 'ARGENTINA') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5007/suggestStreetName';
                }
            else if (selected_pais == 'PARAGUAY') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5008/suggestStreetName';
                }
            else if (selected_pais == 'URUGUAY') {
                console.log("Pais en el IF: ",selected_pais);
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5009/suggestStreetName'
                }
            else {
                params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
                params.url = 'http://127.0.0.1:5007/suggestStreetName'
                }
            $.ajax(params);
        } else {
                 document.getElementById('table').innerHTML = '';
        }
    }

    $("#chain").keyup(function (e) {
        actualiza();
    });

    $('input[type=radio][name=cant]').change(function() {
        console.log('Imprime radio button');
        actualiza();
    });

    $('select[name=pais]').change(function() {
        console.log('Imprime pais');
        $("#table tr").remove();
        $("#chain").val(undefined);
        console.log('Limpia Cadena');
        actualiza();
    });

function tableText(tableCell) {
    alert(tableCell.innerHTML);
}


function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
}


</script>

Answer 1

您可以将通过ajax获取的数据缓存在一个全局变量中，然后通过将一个函数（例如：function FindValues（position））分配给onclick事件来创建一个函数以检索所需的数据，如下所示：

for (var i = 0; i < parsedJSON.length; i++) {
    var newRow   = tableRef.insertRow(0);
    var newCell  = newRow.insertCell(0);
    newCell.onclick = FindValues(i);
    var newText  = document.createTextNode(parsedJSON[i].CHAIN);
    var newText2  = document.createTextNode(parsedJSON[i].CODIGO);
    newCell.appendChild(newText);
}

在FindValues（位置）中，您将拥有所需的数据，并且应该能够执行所需的任何操作。

希望这会有所帮助

欢呼

如何在Javascript HTML上修改警报预览

1 个答案: