Question

我是一个javascript和jQuery新手，所以这可能是一个愚蠢的问题 -

我正在尝试将行追加到html表中，我看到的东西让我感到奇怪：

当我使用document.getElementById（'my_table'）访问我的html表时，我返回对象HTMLTableElement，然后我可以执行insertRow（-1）等操作，但是当我通过jquery访问同一个html表时 - $（'＃my_table'）我得到了对象Object，它显然没有我需要的任何方法。是什么赋予了？

谢谢！

以下是代码：

<html>
  <head>
    <title>FOO </title>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        console.log('ready');

        var data = [
          { "amount":"medium",
            "notes":"chicken teriyaki bento box",
            "date_time":"1391029200",
            "type":"lunch",
            "id":18},

          { "amount":"small",
            "notes":"bread, meat balls",
            "date_time":"1391645306",
            "type":"lunch",
            "id":24}
        ]; 

        data.forEach(function(row) {
            for (var key in row) {
              $('body').append(row[key] + ' ');
            }
            $('body').append('<br>');
          });

        // append to table
        (function() {
          var my_table_jq = $("#my_table");
          $('body').append(Object.prototype.toString.call(my_table_jq));

          var my_table_js = document.getElementById('my_table');
          $('body').append(Object.prototype.toString.call(my_table_js));

        })();


      });
    </script>
  </head>
  <body>
    <table id="my_table" border="1">
      <tr>
        <th>Date</th><th>Meal</th><th>Amount</th><th>Notes</th>
      </tr>
    </table>
  </body>
</html>

Answer 1

您通过 jQuery id selector获得的对象是jQuery对象而不是DOM对象，您必须将其转换为DOM对象。您可以使用 indexer 将其转换为DOM对象。您还可以使用jQuery .get( index )来获取DOM对象。

更改

$('#my_table')

到的

$('#my_table')[0]

或

$('#my_table').get(0)

使用id选择器作为参数调用jQuery（）（或$（））返回一个包含零或一个集合的jQuery对象 DOM元素jQuery doc。

Answer 2

当您访问$('#my_table')之类的对象时，您将获得一个jQuery对象。您可以使用jQuery API来操作此对象。例如，如果您要将删除行添加到表中，可以使用“append”等函数来执行此操作。您可以参考jQuery api文档here。作为示例，我编辑了您的代码以将JSON对象数据添加到表

<!DOCTYPE html>
<html>
<head>
    <title>FOO </title>
    <script src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            console.log('ready');

            var data = [
              {
                  "amount": "medium",
                  "notes": "chicken teriyaki bento box",
                  "date_time": "1391029200",
                  "type": "lunch",
                  "id": 18
              },

              {
                  "amount": "small",
                  "notes": "bread, meat balls",
                  "date_time": "1391645306",
                  "type": "lunch",
                  "id": 24
              }
            ];

            data.forEach(function (row) {
                $('#my_table tbody').append('<tr>');
                $('#my_table tbody').append('<td>' + row['date_time'] + '</td>');
                $('#my_table tbody').append('<td>' + row['type'] + '</td>');
                $('#my_table tbody').append('<td>' + row['amount'] + '</td>');
                $('#my_table tbody').append('<td>' + row['notes'] + '</td>');
                $('#my_table tbody').append('</tr>');
            });

        });
    </script>
</head>
<body>
    <table id="my_table" border="1">
        <tr>
            <th>Date</th>
            <th>Meal</th>
            <th>Amount</th>
            <th>Notes</th>
        </tr>
    </table>
</body>
</html>

Answer 3

尝试这样的事情

document.getElementById('my_table'); //returns a HTML DOM Object

$('#my_table');  //returns a jQuery Object

$('#my_table')[0]; //returns a HTML DOM Object

document.getElementById（＆＃39; id＆＃39;）将返回原始DOM对象。

$（＆＃39;＃id＆＃39;）将返回一个包装DOM对象并提供jQuery方法的jQuery对象。

jQuery $（“＃someId）vs document.getElementById（'someId'），访问相同的DOM元素，看到不同的结果

3 个答案: