将数据绑定到ASP.NET中的数据表

时间:2016-04-28 05:36:19

标签: jquery html asp.net html-table

我在脚本中有一些数据需要安排在数据表中。我不知道如何实现这一点,因为我是一个更新鲜,仍在学习。

数据位于:

<script>
        var $textarea = $('#TextArea1'), $submit = $('#Submit1');
        $submit.click(function (e) {
            e.preventDefault();
            sourceCode = $textarea.val();
            var $searchObject = $('<div id="Searching"></div>');
            $searchObject.append($(sourceCode));

            alert("Number of text boxes = " + $searchObject.find('[type=text]').length);
            $searchObject.find('[type=text]').each(function () {
                alert("Name of textbox = " + $(this).attr("name") + " and its ID is " + $(this).attr("id"));

            });
            alert("Number of Submit Buttons = " + $searchObject.find('[type=submit]').length);
            $searchObject.find('[type=submit]').each(function () {
                alert("Name of Submit button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Telephone entry fields = " + $searchObject.find('[type=tel]').length);
            $searchObject.find('[type=tel]').each(function () {
                alert("Name of Telephone entry field button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Password boxes = " + $searchObject.find('[type=password]').length);
            $searchObject.find('[type=password]').each(function () {
                alert("Name of Password box = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of check boxes = " + $searchObject.find('[type=checkbox]').length);
            $searchObject.find('[type=submit]').each(function () {
                alert("Name of Submit button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Radio buttons on page = " + $searchObject.find('[type=radio]').length);
            $searchObject.find('[type=radio]').each(function () {
                alert("Name of radio button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of drop down lists = " + $searchObject.find('select').length);
            $searchObject.find('[type=select]').each(function () {
                alert("Name of select button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Images on page = " + $searchObject.find('img').length);
            $searchObject.find('[type=img]').each(function () {
                alert("Name of Image = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Hyperlinks on page = " + $searchObject.find('a[href]').length);

            alert("Number of Buttons     = " + $searchObject.find('[type=button]').length);
            $searchObject.find('[type=button]').each(function () {
                alert("Name of button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));

            });
            alert("Number of Date entry fields= " + $searchObject.find('[type=date]').length);
            $searchObject.find('[type=date]').each(function () {
                alert("Name of date button = " + $(this).attr("name") + " and its ID is =" + $(this).attr("id"));
            });     
        });
    </script>

我想将这些数据绑定到数据表中并将其显示在网页中,而不是将它们显示为警报弹出窗口。数据需要安排在

下的表格中
<table>
  <tr>
      <th>Element </th>
      <th>Element name</th>
      <th>Element ID</th>
  </tr>
</table>

实现这一目标的最佳方法是什么?任何人都可以帮我解决这个问题吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <textarea id="TextArea1"></textarea>
      <button id="Submit1">submit</button>
    </body>
    </html>
<script>
    $(document).ready(function(){
      var $textarea = $('#TextArea1'), $submit = $('#Submit1');
            $submit.click(function (e) {
                e.preventDefault();
                sourceCode = $textarea.val(); 
                var $searchObject = $('<div id="Searching"></div>');
                $searchObject.append($(sourceCode));

              var table = $('<table border="1"></table>');
                table.append("<tr><td colspan='2'>Number of text boxes = " + $searchObject.find('[type=text]').length+"</td></tr>");

                $searchObject.find('[type=text]').each(function () {
                    table.append("<tr><td>Name of textbox = " + $(this).attr("name") + "</td><td> and its ID is " + $(this).attr("id")+"</td></tr>");
                });

              table.append("<tr><td colspan='3'>Number of Submit Buttons = " + $searchObject.find('[type=submit]').length+"</td></tr>");
                $searchObject.find('[type=submit]').each(function () {
                    table.append("<tr><td>Name of Submit button = " + $(this).attr("name") + "</td><td> and its ID is =" + $(this).attr("id")+"</td></tr>");
                });

              //Added remaining code here

              table.appendTo($(this).parent());        
            });
    });
</script>

找到将数据添加到表的脚本。 Tnx到http://forums.asp.net/members/raju%20dasa.aspx