Vamshi King Vamshi King - 1 month ago 6
MySQL Question

Need to strike rows and columns when 5 buttons are clicked

I want to strike columns and rows in the table when 5 buttons are clicked in a row or column can anyone do so. How can the draw line function can be implemented in the code. here is the code i want you to check

code:

<html>
<head>
<title>BINGO</title>
<style>
h1{
color:purple;
font-size:500%;
font-family:verdana;
}
</style>

</head>
<body style="background-color:pink">
<center><h1>B I N G O</h1></center>
<table border="25" cellpadding="5" align="center" style="background-color:yellow" >
<tr>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background:#25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle1" onClick="onClickHandler(this)";>1</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle2" onClick="onClickHandler(this)";>2</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>



</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle3" onClick="onClickHandler(this)";>3</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle4" onClick="onClickHandler(this)";>4</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle5" onClick="onClickHandler(this)";>5</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
</tr>
<tr>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle6" onClick="onClickHandler(this)";>6</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle7" onClick="onClickHandler(this)";>7</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle8" onClick="onClickHandler(this)";>8</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle9" onClick="onClickHandler(this)";>9</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle10" onClick="onClickHandler(this)";>10</button>


<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
</tr>
<tr>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle11" onClick="onClickHandler(this)";>11</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle12" onClick="onClickHandler(this)";>12</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle13" onClick="onClickHandler(this)";>13</button>



<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle14" onClick="onClickHandler(this)";>14</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle15" onClick="onClickHandler(this)";>15</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
</tr>
<tr>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle16" onClick="onClickHandler(this)";>16</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle17" onClick="onClickHandler(this)";>17</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle18" onClick="onClickHandler(this)";>18</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle19" onClick="onClickHandler(this)";>19</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle20" onClick="onClickHandler(this)";>20</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
</tr>
<tr>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle21" onClick="onClickHandler(this)";>21</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle22" onClick="onClickHandler(this)";>22</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle23" onClick="onClickHandler(this)";>23</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle24" onClick="onClickHandler(this)";>24</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>


</td>
<td><button style="width: 100px; padding: 10px; box-shaddow: 10px 6px 5px; #999999; -webkit-box-shadow: 6px 6px 5px #999999; -moz-box-shadow: 6px 6px 5px #999999; font-weight: bold; background: #25BEA0; color: #000000; cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9; font-size: 150%;" id="toggle25" onClick="onClickHandler(this)";>25</button>

<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>

</td>
</tr>
</table>
</body>
</html>

Answer

Brother, for the sake of least security purpose of the users of your website, please do not implement these codes to edit or update informations. i may tell you some reasons for that.

  1. You are using mysql* that is the stuff of php4 and you must know that current version is php7 so you are using a really old version. You must learn PDO or MySQLi. PDO would be preferable.

    Learning new stuff like MySQLi/PDO is not a rocket science, it will take just couple of days, but the result would be far more better than your current situation.

  2. You are using queries like UPDATE xyz SET x = "123", y="456" WHERE z = "987" A really novice hacker may retrieve your database information using merely address bar of browser. Precisely learn about special chars escaping like htmlspecialchars,or PDO Params for the purpose like $firstname = htmlspecialchars($_POST['firstName']).

  3. For retrieving the data from database for a unique user, preferably use session. `

    Session is nothing but the access data on server for the environment of your website. Each time you run a login script, then at the line where your code completes all check, use this code:

    session_start(); 
    $_SESSION['firstname'] = htmlspecialchars($_POST['firstname'])
    // and so on...
    

    That is ok. Now in the form where you want to fill the user data, use

    <input type="text" value="<?php echo $_SESSION['firstname'];?>">`
    
Comments