如何使用jquery永久更改数据库数据的样式？

Question

I have a table that displays data from my database. On each row, there is a button that i made with jquery to cross the row out when clicked. When I refresh the page though, the crossed out style doesnt stay. the jquery style change isnt permanent. it there a way to make this change permanent?

$('table').on('click','.dead',function(){

          $(this).parent().siblings().css({textDecoration: 'line-through'});

    });

and the php

<?php while($row = $data->fetch_assoc()) { ?>
<tr>

<td><?php echo $row['title']; ?> </td>
<td><?php echo  $row['requester']; ?></td>
<td><?php echo $row['reward']; ?></td>
<td><?php echo $row['qual']; ?></td>
<td><?php echo $row['time']; ?></td>
<td><?php echo $row['category']; ?></td>
<td><a href="<?php $row['link']; ?>"><button class="btn btn-mini btn-primary" type="button">Do This Hit</button></a></td>
<td><button class="btn btn-danger btn-mini dead" type="button">Dead</button></td>

</tr>
<?php } ?>

Answer 1

Your html, .js and .css code is all pulled from the server every time the page is requested. That means whatever styles you apply via .JS will be wiped away the next time the page is requested, that is what you are seeing now.

You the developer are responsible for programming some sort of stored flag, and read it on $(document).ready() so that when the page is requested and the dom is ready the first thing it will do is check your persisted flag and it can re-apply the the current state of your style (either on or off, or in your case, line-through or no line-through)

There are many options for how you go about persisting that flag. You could set a cookie, you could use Session storage, you could use LocalStorage, or you could even set a flag in your database. It's up to you to provide the persistence of that state.

If you are supporting modern browsers you could try setting a flag in localstorage() http://www.jquerysdk.com/api/jQuery.localStorage