Question

我知道这种无关紧要的问题，但我遇到了一些困难。我在小提琴https://jsfiddle.net/ew5y6pd1/4/找到了一个代码并且它的工作完整，但是当我复制并放置一个在线html编辑器时，数据不会被追加。下面显示我复制到在线html编辑器的代码。我错过了任何图书馆吗？

<!Doctype html>
<html>
<head>

<style>
th, td { border: 1px solid black;}
</style>


<script>
$(document).ready(function() {

    $("#add").on('click', function() {
      var user = {
        Id: '',
        Name: ''
      }
      var row = $('<tr/>');
      user.Id = $("#id").val();
      user.Name = $("#Name").val();



      row.append($('<td/>').text(user.Id));
      row.append($('<td/>').text(user.Name));

      $("#reservations tbody").append(row);
     });

    $('#sort').on('click', function(){
        var rows = $('#reservations tbody tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(0).text().toUpperCase();
  var B = $(b).children('td').eq(0).text().toUpperCase();

  if(A < B) {
    return -1;
  }

  if(A > B) {
     return 1;
  }

  return 0;

  });

  $.each(rows, function(index, row) {
    $('#reservations').children('tbody').append(row);
  });
    })
});

</script>


</head>
<body>



    <input type="text" id="id" />       
    <input type="text" id="Name" />
    <input type="button" id="add" value="Add" />
    <br />
    <input type="button" id="sort" value="sort" />

    <table id="reservations">
        <thead>
            <tr>
                <th> Id </th>
                <th> Name </th>
         </tr>
    </thead>
    <tbody>
    </tbody>
</table>





</body>
</html>

Answer 1

JS Fiddle实例加载the jQuery library，它提供$函数。

您需要下载该库（或找到托管版本的URL）并包含一个<script>元素，在运行依赖它的脚本之前加载它。

为什么在Fiddle工作的代码不能在在线html编辑器中工作？

1 个答案: