单项成绩表格.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" >
  5. <title>运动员成绩表</title>
  6. <link rel="stylesheet" href="static/css/index.css">
  7. <link rel="stylesheet" href="static/eui/element-ui.css">
  8. <script src="static/vue/vue.min.js"></script>
  9. <script src="static/vue/vue-resource.js"></script>
  10. <script src="static/eui/index.js"></script>
  11. <script src="static/comm/Ajax.js"></script>
  12. <script src="js/jquery-3.4.1.min.js"></script>
  13. <script src="js/other.js"></script>
  14. <style type="text/css">
  15. .one-achievement{
  16. margin: 50px 50px;
  17. width:1000px;
  18. }
  19. .one-achievement table{
  20. background:#E0ECFF;
  21. width:100%;
  22. }
  23. .one-achievement td{
  24. background:#fafafa;
  25. text-align:center;
  26. padding:2px;
  27. }
  28. .one-achievement td{
  29. background:#E0ECFF;
  30. }
  31. .one-achievement td.drop{
  32. background:#fafafa;
  33. width:100px;
  34. }
  35. .one-achievement td.over{
  36. background:#FBEC88;
  37. }
  38. .add{
  39. width: 100px;
  40. height: 30px;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div class="one-achievement" id="app">
  46. 项目:<input type="text" id="id" placeholder="请输入项目id" />
  47. <button value="按钮" id="findAll" @click="onSubmit">查询</button>
  48. <h1>单项成绩表</h1>
  49. <table v-for="(c1,c1z) in c1s.slice(0,1)" >
  50. <caption>比赛项目:{{c1.name}}</caption>
  51. <tr>
  52. <td>序号</td>
  53. <td>学院</td>
  54. <td>学生编号</td>
  55. <td>姓名</td>
  56. <td>项目排名</td>
  57. <td>分数</td>
  58. </tr>
  59. <tr v-for="(c2,c2z) in c1.sportsitems_people.slice(0,6)" >
  60. <td class="drop">{{c2z+1}}</td>
  61. <td class="drop">{{c2.sportsgroup.name}}</td>
  62. <td class="drop">{{c2.pid}}</td>
  63. <td class="drop">{{c2.name}}</td>
  64. <td class="drop">{{c2z+1}}</td>
  65. <td class="drop">{{c2.grade}}</td>
  66. </tr>
  67. </table>
  68. </div>
  69. </body>
  70. <script>
  71. new Vue({
  72. el: '#app',
  73. data() {
  74. return {
  75. c1s: [],
  76. c11s: [],
  77. listLoading:false,
  78. }
  79. },
  80. created() {
  81. this.ajax = new Ajax(this);
  82. // this.getSportsitems_peopleController()
  83. },
  84. methods: {
  85. //通过ajax去请求服务端,获取数据
  86. getSportsitems_peopleController() {
  87. var id = $("#id").val();
  88. let that = this;
  89. let url = "SportsitemsController/findAllzhong3/"+id;
  90. //调用Ajax的get方法
  91. that.ajax.get(url, function (rs) {
  92. var index=new Array();
  93. for(var i=0;i<rs.length;i++){
  94. index[i] = rs[i]["sportsitems_people"]
  95. that.c11s=index;
  96. console.log(that.c11s)
  97. }
  98. that.c1s = rs;
  99. console.log(that.c1s)
  100. });
  101. },
  102. onSubmit() {
  103. let that = this;
  104. that.getSportsitems_peopleController()
  105. },
  106. }
  107. })
  108. // getSportsitems_peopleController3(){
  109. // // $("#findAll").click(function(){
  110. // // var id = $("#find").children("input[type=text]").eq(0).val();
  111. // // axios.post('http://localhost:8199/SportsitemsController/findAllzhong3',{
  112. // // "id":1
  113. // // }).then((msg)=> {
  114. // // var c1s=new Array();
  115. // // c1s = msg.data;
  116. // // console.log(c1s)
  117. // // }).catch(function (xhr,data) {
  118. // // console.log(xhr.status);
  119. // // });
  120. // // var id = $("#find").children("input[type=text]").eq(0).val();
  121. // let that = this;
  122. // let url = "SportsitemsController/findAllzhong3/1";
  123. // // let url = "item/selectAll";
  124. // //调用Ajax的get方法
  125. // that.ajax.get(url, function (rs) {
  126. // that.c1s = rs;
  127. // console.log(rs);
  128. // });
  129. // // })
  130. // },
  131. </script>
  132. </html>