Question

我根据我得到的数据动态构建表。如果我得到x项，我构建2x行。我希望每个第二行都是不可见的，只有当用户点击之前的行时 - 第二行才会显示。这就是我到目前为止所做的：

addRowHandlers()是使行可见或不可见的函数。

  <script>

    function insertTable() {

        var from_cost = document.getElementById('fromCost').value;
        var to_cost = document.getElementById('toCost').value;
        var city = document.getElementById('city').value;

        var area = document.getElementById('Area');
        var areaString = area.options[area.selectedIndex].text;
        var type = document.getElementById('type');
        var typeString = type.options[type.selectedIndex].text;





        var course = Parse.Object.extend("course");
        var query = new Parse.Query(course);
        if (city != "")
            query.equalTo("city", city);
        if (areaString != "")
            query.equalTo("region", areaString);
        if (typeString != "")
            query.equalTo("inType", typeString);
        if (from_cost != "")
            query.greaterThanOrEqualTo("costString", from_cost);
        if (to_cost != "")
            query.lessThanOrEqualTo("costString", to_cost);
        query.find({
            success: function (results) {

                // Do something with the returned Parse.Object values
                var num_rows = results.length;
                var num_cols = 2;
                var width = 80;
                var theader = "<table id='table1'  class=\"CSS_Table_Example\" dir=\"rtl\" width = ' " + width + "% '>";
                var tbody = "";

                theader += "<th>טלפון </th>";
                theader += "<th>דירוג </th>";

                for (var i = 0; i < num_rows * 2; i++) {
                    tbody += "<tr>";
                    if (i % 2 == 0) {
                        var object = results[i / 2];

                        tbody += object.get('phoneString');
                        tbody += "</td>";
                        tbody += "<td>";
                        tbody += object.get('rank');
                        tbody += "</td>";
                    }

                    else {
                        tbody += "<td colspan=\"2\">";
                        tbody += " ";
                        tbody += "</td>";
                    }

                    tbody += "</tr><br />";
                }
                var tfooter = "</table>";
                document.getElementById('wrapperi').innerHTML = theader + tbody + tfooter;
                addRowHandlers();
            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });



    }



    function addRowHandlers() {
        var table = document.getElementById("table1");
        var rows = table.getElementsByTagName("tr");


        rows.Attributes.Add("style", "display: none;");

        for (i = 0; i < rows.length; i++) {
            var currentRow = table.rows[i];
            var createClickHandler =
                function (row) {
                    return function () {
                        var cell = row.getElementsByTagName("td")[0];

                        var id = cell.innerHTML;
                        alert("id:" + id);
                    };
                };

            currentRow.onclick = createClickHandler(currentRow);
        }
    }
</script>

Answer 1

这是一个简单的代码示例，它动态地将5对行添加到表中，然后在单击每行时显示不可见的对：

  for(var i=0; i<5; i++)
  {
      $("#myTable").append('<tr class="child"><td>row ' + i.toString() +'<\/td></tr>');
      $('#myTable').append('<tr class="invchild"><td>invisible<\/td></tr>');
  }

  $("tr.child").bind('click', function() { 
      $(this).next(".invchild").show();
  });

工作演示：http://jsfiddle.net/s8FLK/

创建动态不可见的表格行

1 个答案: