Question

我是一名初学者Web开发人员，并且我试图用表中的名义雇员信息创建一个EJS应用程序。我希望表格在选择行或员工时显示更多信息。我尝试了一个基本的jQuery clickable-row解决方案，但是没有显示我指定的URL（用于测试）。你能帮我吗？

-index.ejs-

  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.1.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.0.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.2.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^6.3.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-jest-enzyme": "^7.1.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^22.17.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.18.2",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },

-scripts.ejs-

<tbody>
    <% newEmployee.forEach(function(employee) { %>
        <tr class="clickable-row" data-url="https://www.google.com/">
            <td><%= employee.name %></td>
            <td><%= employee.title %></td>
            <td><%= employee.email %></td>
        </tr>
     <% }); %>
</tbody>

Answer 1

使用 click（）来插入 $（selector）.on（事件[，选择器] [，数据]，处理程序），因为行是动态生成的。

    var employee = [{ name: 'abc', title: 'pqr', email: 'a@b.c' }, { name: 'abc', title: 'pqr', email: 'a@b.c'}];

         var tbody=$('<tbody/>');
      $.each(employee,function(i,e){
          var tr = $('<tr data-url="https://www.google.com/"></tr>').addClass('clickable-row');
            tr.append('<td>'+e.name+'<td/>');
            tr.append('<td>'+e.title+'<td/>');
            tr.append('<td>'+e.email+'<td/>');
            tbody.append(tr);
        });
        $('table').append(tbody);

        $(document).ready(function () {
            $('.clickable-row').on('click', function () {
                var url = $(this).data('url');
                window.location = url;
            });

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border:1px solid black"></table>

如何在EJS模板中修复可点击的jQuery行

1 个答案: