Coldfusion 和 Jquery 结果表格式化答案

【问题标题】：Coldfusion and Jquery results table formattingColdfusion 和 Jquery 结果表格式化
【发布时间】：2013-10-31 19:19:41
【问题描述】：

我正在使用 Coldfusion 9 和 Sql Server 2008 r2。我正在尝试使用显示结果的实时搜索。

原帖是：http://www.raymondcamden.com/index.cfm/2011/2/1/Using-jQuery-to-search-against-different-types-of-content

我想为此添加一个表格，以便对其进行格式化。任何帮助都会很棒。

这是 Search.cfm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
$(document).ready(function() {

//http://stackoverflow.com/questions/217957/how-to-print-debug-messages-in-the-google-chrome-javascript-console/2757552#2757552
if (!window.console) console = {};
console.log = console.log || function(){};
console.dir = console.dir || function(){};


//listen for keyup on the field
$("#searchField").keyup(function() {
    //get and trim the value
    var field = $(this).val();
    field = $.trim(field)

    //if blank, nuke results and leave early
    if(field == "") {
        $("#results").html("");
        return;
    }

    console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "";
        s += "<h2>Results</h2>";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<p><b>uid:"+res.fd_table[i].fd_uid+"</b><br/>Device: "+res.fd_table[i].fd_dev + "<br/>";

        }

        $("#results").html(s);
    });
});
 })

<form>
Search: <input type="text" name="search" id="searchField">
</form>

<div id="results"></div>

Demo 来自原帖http://www.coldfusionjedi.com/demos/feb12011/test.cfm

这是我想要达到的最终结果。

【问题讨论】：

为什么要使用表格？使用
..
.etc 代替！？
w3schools.com/html/html_tables.asp。这是我想要达到的结果类型。
有什么例子我可以去看看吗？我所发现的只是 jquery 中的极端表示例。想要一个简单的
正如 BDavis 建议的那样，如果你真的想使用一个表，你应该学习如何动态创建一个 :) 看看这个jquerytipsntricks.wordpress.com/2013/08/18/…
forum.jquery.com/topic/create-html-table-dynamically

标签： jquery sql-server-2008 coldfusion formatting html-table

【解决方案1】：

您可能想了解如何使用 JQuery 动态构建表。你提出这个问题的方式听起来很像“请完成我的家庭作业”，而不是在一个合法的项目上寻求帮助。

如果您查看代码中的 $.getJSON() 函数，变量 s 的使用方式将为您提供有关如何完成此操作的可靠线索。一个表是 X 个 tr 标记，用于 X 个包含数据的 td 单元格的行。从那里只需循环遍历 tr 标签的查询结果行和 td 标签的每一列。

不打算为你写出代码，但我已经给你足够的搜索 JQuery 文档来指出你正确的方向。

【讨论】：

我问的原因是因为我对jQuery一无所知。如果你能指出一个类似的样本，我将非常感谢你。

【解决方案2】：

这是结果，我可以制作一个简单的表格。谢谢大家的建议。

console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "<table name='table1' border='1'><tr><th>Uid</th><th>Device</th><th>Region</th><th>Problem</th><th>Description</th><th>Resolution</th><th>Agent</th></tr>";

        s += "";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<tr><td width='142' >"+res.fd_table[i].fd_uid+"</td><td>"+res.fd_table[i].fd_dev + 
            "</td><td>"+res.fd_table[i].fd_reg +
            "</td><td> "+res.fd_table[i].fd_prob + 
            "</td><td> "+res.fd_table[i].fd_pdes + 
            "</td><td>"+res.fd_table[i].fd_res + 
            "</td><td> "+res.fd_table[i].fd_agent + 
            "</td>";
           s += "</tr>";
        }
         s += "</table>";
        $("#results").html(s);
    });
   });
 })

【讨论】：