Question

我正在创建一个小型Web应用程序，我在编写这段代码时遇到了一些麻烦。我需要做的是：表单将接受输入，例如姓名，年龄和地址，并将其添加到数据列表中。它将检查列表中是否已存在名称。如果是，则触发更新而不是添加到列表中。

在index.html（DONE）中添加JQuery CDN脚本
指定在DOM完全加载（HALF DONE）时执行的文档就绪函数
在提交按钮上添加事件以添加或更新列表中的对象。请务必使用PreventDefault来防止页面刷新在表格上提交。
在下拉列表中添加事件，以便从列表中选择名称时，对象的详细信息将显示在表单中。
在列表项中向锚点添加事件，因此在单击名称时，对象的详细信息将显示在表单中。

在清除按钮上添加事件以清除表单数据。

这是我的代码：

$(document).ready(function() {

  $("submit").click(function(event) {

    event.preventDefault();

  });

  var data = [{
    "name": "Bob",
    "age": 35,
    "address": {
      "street": "6565 Sunset Blvd",
      "zip": "90028",
      "city": "Los Angeles"
    }
  }, {
    "name": "Angela",
    "age": 25,
    "address": {
      "street": "1234 Tropicana blvd",
      "zip": "89100",
      "city": "Las Vegas"
    }
  }, {
    "name": "Carol",
    "age": 52,
    "address": {
      "street": "4232 Melrose ave",
      "zip": "90029",
      "city": "Los Angeles"
    }
  }, {
    "name": "Jack",
    "age": 63,
    "address": {
      "street": "1344 First Street",
      "zip": "90105",
      "city": "Las Vegas"
    }
  }, {
    "name": "Celine",
    "age": 21,
    "address": {
      "street": "1344 First Street",
      "zip": "10003",
      "city": "New York"
    }
  }, {
    "name": "Luke",
    "age": 74,
    "address": {
      "street": "1344 first street",
      "zip": "10105",
      "city": "Bronx"
    }
  }, {
    "name": "Martin",
    "age": 55,
    "address": {
      "street": "1344 first street",
      "zip": "10108",
      "city": "Bronx"
    }
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader" style="display:none;">
  <img class="ajax-loader" src="https://core.trac.wordpress.org/raw-attachment/ticket/21456/wpspin_light.gif" />
</div>
<div id="ajaxresults"></div>
<div id="msg">Please select a filter</div>
<select id="filter">
            <option value="">Choose a filter</option>
                <option value="name">Name</option>
                <option value="age">age</option>
                <option value="address">Address</option>
        </select>

<select id="filtercss">
            <option value="">Choose a style</option>
                <option value="wb">with cell border</option>
                <option value="nb">no cell border</option>
        </select>

<table id="tbl" style="border-style:solid;border-size:1px;">
</table>

如何创建JQuery过滤器？

0 个答案: