I have a code which has buttons to add and delete rows. I want to change the background as soon as mouse enters the table and back to normal when it leaves the table. I checked all the solutions on stackoverflow nothing is working for me.
Here is my html code for the table:
</html>
<body>
<div class="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>First Name</th>
<th>Last name</th>
<th>Email</th>
<th>Telephone</th>
</tr>
<tr id="row1">
<td id="fname_row1"><input type='text' name='first_name'></td>
<td id="lname_row1"><input type='text' name='last_name'></td>
<td id="emial_row1"><input type='text' name='email'></td>
<td id="telephone_row1"><input type='text' name='telephone'></td>
<td>
<input type="button" value="Delete" class="delete"
onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="fname_row2"><input type='text' name='first_name'></td>
<td id="lname_row2"><input type='text' name='last_name'></td>
<td id="email_row2"><input type='text' name='email'></td>
<td id="telephone_row2"><input type='text' name='telephone'></td>
<td>
<input type="button" value="Delete" class="delete"
onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="fname_row3"><input type='text' name='first_name'></td>
<td id="lname_row3"><input type='text' name='last_name'></td>
<td id="email_row3"><input type='text' name='email'></td>
<td id="telephone_row3"><input type='text' name='telephone'></td>
<td>
<input type="button" value="Delete" class="delete"
onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_fname"></td>
<td><input type="text" id="new_lname"></td>
<td><input type="text" id="new_email"></td>
<td><input type="text" id="new_telephone"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"
style="float:center;">
</td>
</tr>
</table>
</div>
</body>
</html>
And here is my script code:
$(document).ready(function()
{
$(".wrapper").on("mouseenter","td", function() {
$("input[type=text]").css("background-color", "lightblue");
}).on("mouseleave","td", function() {
$("input[type=text]").css("background-color", "");
});
});
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
};
function add_row()
{
var new_fname=document.getElementById("new_fname").value;
var new_lname=document.getElementById("new_lname").value;
var new_email=document.getElementById("new_email").value;
var new_telephone=document.getElementById("new_telephone").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'>
<td id='fname_row"+table_len+"'>"+new_fname+"<input type='text'
name='first_name'></td><td id='lname_row"+table_len+"'>"+new_lname+"<input
type='text' name='last_name'></td><td
id='email_row"+table_len+"'>"+new_email+"<input type='text' name='email'>
</td><td id='telephone_row"+table_len+"'>"+new_telephone+"<input
type='text' name='telephone'></td><td><input type='button' value='Delete'
class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_fname").value="";
document.getElementById("new_lname").value="";
document.getElementById("new_email").value="";
document.getElementById("new_telephone").value="";
};
And thank you