2015-07-01 54 views
0

我想为我的工作中的员工制作一个(谁在这里)概述页面。如何在点击后保存jquery点击更改? (Serverside)

我有这个.click函数现在运行,我给每个人一个ID。

fx。如果我去并点击改变我的状态,那么怎么可能有人在另一台电脑上打开浏览器,看到我将选项从“工作”更改为“不工作”?

我读到,它是maby可能与jQuery Cookie或AJAX做。

这里是我的代码:

$('.working').hide(); 
 
$('#martin .off-work').show(); //. why do i have only martin tag here? 
 
$('.oversigt').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var t = $(this); 
 
    t.hide().siblings('.oversigt').show(); 
 
});
* { 
 
    font-size: 40px; 
 
    } 
 
    .oversigt { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #000; 
 
    } 
 
    .off-work { 
 
    background: red; 
 
    } 
 
    .working { 
 
    background: lime 
 
    }
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>The Gardeners</title> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 

 
<body> 
 
    <table border="1" style="width:100%"> 
 
    <tr> 
 
     <th style="width:50%">Name</th> 
 
     <th style="width:50%">Status</th> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Hanne</td> 
 
     <td id="hanne"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Lars</td> 
 
     <td id="lars"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Bent</td> 
 
     <td id="bent"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Steen-Allan</td> 
 
     <td id="sa"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Jacob</td> 
 
     <td id="jacob"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Steen Urth</td> 
 
     <td id="su"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Elsebeth</td> 
 
     <td id="elsebeth"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Pia</td> 
 
     <td id="pia"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Dorthe</td> 
 
     <td id="dorthe"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Martin</td> 
 
     <td id="martin"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td>Jesper</td> 
 
     <td id="jesper"> 
 
     <a class='oversigt off-work btn' href='d'>Off work</a> 
 
     <a class='oversigt working btn' href='#'>Working</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

编辑:(。他只是告诉我怎么能发送输入的值) 只见教程https://www.youtube.com/watch?v=-EHbBHm5l4g有关职位,并得到我用这段代码创建了一个名为jfunc.js的文件,我创建了一个没有代码的store.php文件(还没有)。

我不明白我可以如何使工作显示,而不是隐藏。

$('#name') .on('click', function() { 

var name = $('#martin').val(); $ .post('store.php',{name:name},function(data){

}); });

+0

你的意思是把它保存在服务器端? –

+0

是的,我不认为我需要使用像mySQL这样的数据库。我只会编辑问题:-) –

回答

0

由于您需要让其他计算机的其他用户看到您点击的内容,因此需要使用服务器端存储来保存选定的值并读取它们。
您可以使用jquery post将选定值发送到服务器端代码(服务器端代码基于您的语言 - 可以是php,c#,...)
并将选定的值保存在任何存储(数据库,应用程序会话变量, xml文件...),然后使用jquery get从服务器端读取,您需要以ajax样式读取,或者只是在页面加载时加载所选值。