一个输入框的值动态影响页面的显示

比如说我有一个输入框，如果输入3，页面就会查询数据库显示3条数据。
如果输入5，就会查询数据库显示5条数据。亲们 这怎么实现的啊

解决方案 »

  1.   

    看需求, 可以给 textbox 绑定 onkeyup / onchange 等等事件, 
    回调函数发一个 Ajax 后台查询, 结果传到前台显示
      

  2.   

    嘿嘿  我的input 怎么不能出发onchange事件呢
      

  3.   

    利用文本框onchange事件，然后提交表单数据或者使用ajax，
      

  4.   

    我的意思是我比如说在输入框内输入3 那么我就创建3个固定行数和列数的table
      

  5.   


    我愣是没弄明白，你列数也不固定？  还是只是行不固定？如果只是行不固定，你在文本框里面用blur 或者change事件 触发请示，把当前的值 传给你后台 绑定table 数据的方法，里面做分条数显示的逻辑就可以了啊如果你是行不固定以及列也不固定， 行一样的按照上面的方式取，至于 列就看你自己了想怎么显示什么列就显示什么列， 理论上说我是没遇到 过这样的需求，列的显示不会跟据行的变化而变化，最多根据权限有关系，来控制哪些列要显示和哪些列要隐藏。
      

  6.   

    你是怎么绑定数据的？ 为什么要创建table的行数呢？ 这个应该不用你考虑的，你如果是用控件绑定，要么只需要提供一个json格式 串，然后定义列， 行数就不用你定义了，
    如果你是.net 控件或者其它的 控件绑定的，应该就是循环 tr
    例如
      @foreach (var item in Model.GetGoodsList.InnerList)
                {
           
                    <tr>
                        <td align="center">
                            @item.SKU
                        </td>
                        <td>@item.FullName>}
      

  7.   

    <body id="body">
    输入行列数<input type="text" id="cr" value=""/>
    <input id="btn_ct" type="button" value="生成表格"/>
    </body>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $("#btn_ct").click(function(){
    var rows = $("#cr").val();
    var columns = $("#cr").val();

    var table = new Table( rows , columns );
    table.clear();
    table.create();
    });

    function Table( rows , columns ){
    this.rows = rows;
    this.columns = columns;
    }
    Table.prototype.clear = function(){
    $("table").remove();
    }
    Table.prototype.create = function(){
    var rows = this.rows,columns = this.columns;
    var $t = $("<table border=1></table>");
    for( var r = 1 ; r <= rows ; r++ ){//loop rows
    var $tr = $("<tr></tr>");
    for( var c = 1 ; c <= columns ; c++ ){//loop columns
    $tr.append("<td>&nbsp;</td>");
    }
    $t.append( $tr );
    }
    $("#body").append( $t );
    }

    </script>
      

  8.   


    <form id="form" action="search.do" method="post">
    <select id="row" name="row">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    <table>
    <c:forEach var="item" items="${list}">
        <tr><td>...</td></tr>
    </c:forEach>
    </table>
    </form>
    $("#row").change(function() {
        $("#form").submit();
    });
    后台根据获取到的frombean里的row，查询相应的行数显示
      

  9.   

    具体是这样解决的
    function createValue(){
    var selectValue = parseInt(document.getElementById("payMoneyCount").value);
    var table = document.getElementById("table1");
    var cellslength = table.cells.length;
    if (selectValue >= table.rows.length-1) {
    for (var i = 0, len = selectValue - (table.rows.length-1); i < len; i++) {
    var node = document.getElementById("tr1").cloneNode(true);
    document.getElementById("tr1").parentNode.appendChild(node);
    } } else {
    for (var k=2, len=table.rows.length; k<=len-selectValue; k++) {
    table.deleteRow();
    }
    }
    }