Home >Web Front-end >HTML Tutorial >Company election, I plan to create an html to count votes, please help! _html/css_WEB-ITnose
Company election, I plan to create an html to count votes, please help! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:06:111458browse
<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> * {text-align: center;} p {font: 30px;} table {border: 1px #000 solid; line-height: 30px;} tr,th,td {border: 1px #000 solid; height: 30px; width: 80px;} input {line-height: 30px; width: 60px; margin-top: 5px;} </style> </head> <body> <p>选举大会</p> <table> <tr> <th>姓名</th> <th>当前票数</th> <th>加一</th> </tr> <tr> <td>一号</td> <td>0</td> <td><input type="submit" value="加" /></td> </tr> <tr> <td>二号</td> <td>0</td> <td><input type="submit" value="加" /></td> <tr> <td>三号</td> <td>0</td> <td><input type="submit" value="加" /></td> </tr> <tr> <td>四号</td> <td>0</td> <td><input type="submit" value="加" /></td> </tr> </table> </body></html> If you want to press the "Add" button at the back, the "current number of votes" will be increased by 1. What should I do? ?
Reply to the discussion (solution)
Let’s give a soy sauce LS answer
It’s very simple, write ajax on the server side Interface, the client adjusts it when clicked, and the number of votes is updated in the callback function. Please pay attention to the verification code function, otherwise it will be easy to swipe votes.
It is very simple. The ajax interface is written on the server side. , the client adjusts it when clicked, and the number of votes is updated in the callback function. Please pay attention to the verification code function, otherwise it will be easy to swipe votes
. There is no need to upload the server, just use it locally, and mark the remaining ones. And the trouble of statistics, so that the number of votes can be seen at a glance, can it be achieved with JS? If what you want to do is record-keeping, you can consider using cookies to store several specific values
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> * {text-align: center;} p {font: 30px;} table {border: 1px #000 solid; line-height: 30px;} tr,th,td {border: 1px #000 solid; height: 30px; width: 80px;} input {line-height: 30px; width: 60px; margin-top: 5px;} </style> <script src="http://festatic.aliapp.com/js/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $('.add').click(function(){ var countTd=$(this).parent().prev(); var countCur=(parseInt(countTd.html())||0)+1; countTd.html(countCur); }); }) </script> </head> <body> <p>选举大会</p> <table> <tr> <th>姓名</th> <th>当前票数</th> <th>加一</th> </tr> <tr> <td>一号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> <tr> <td>二号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> <tr> <td>三号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> <tr> <td>四号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> </table> </body></html>
If you want to do it record-keeping, Then you can consider using cookies to store several specific values
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> * {text-align: center;} p {font: 30px;} table {border: 1px #000 solid; line-height: 30px;} tr,th,td {border: 1px #000 solid; height: 30px; width: 80px;} input {line-height: 30px; width: 60px; margin-top: 5px;} </style> <script src="http://festatic.aliapp.com/js/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $('.add').click(function(){ var countTd=$(this).parent().prev(); var countCur=(parseInt(countTd.html())||0)+1; countTd.html(countCur); }); }) </script> </head> <body> <p>选举大会</p> <table> <tr> <th>姓名</th> <th>当前票数</th> <th>加一</th> </tr> <tr> <td>一号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> <tr> <td>二号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> <tr> <td>三号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> <tr> <td>四号</td> <td>0</td> <td><input type="submit" value="加" class="add"/></td> </tr> </table> </body></html> Thank you very much! !
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn