jquery event on dynmically created table row

Question

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

http://cr8code.co/editor.php?workid=73d94f24eff3a5116bff89aeea9ee9ae this is the fixed URL — Güney Saramalı, Oct 07 '17 at 20:23
Also you row variable is not true at all. thats not the way to create elements, assaign them attributes and append them. — Güney Saramalı, Oct 07 '17 at 20:30
@GüneySaramalı The only reason i was using js is because, the background must change when you press alt and then hover over it. — PramodHegde, Oct 07 '17 at 21:29

score 0 · Accepted Answer · answered Oct 07 '17 at 20:35

//  Elems to add
var elems = ["first_name", "last_name", "email", "telephone"];

function add_row(){
  //  Define row var
  var row = "";
  
  //  Add input elems
  for(var i in elems){
    row += "<td><input name='"+elems[i]+"' type='text'/></td>"
  }
   
   
  //  Add remove button
  row += "<td><input type='button' value='Delete' class='delete' onclick='delete_row(this)'></td>";
  
  //  Add new row
  $("table tbody").append("<tr>"+ row +"</tr>");
}

function delete_row(elem){
  $(elem).parents('tr').remove();
}

table tr:hover{
  background: blue; /* Change row background color */
}
table:hover{
  background: blue; /* Change table background color */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input type='text' name='first_name'></td>
      <td><input type='text' name='last_name'></td>
      <td><input type='text' name='email'></td>
      <td><input type='text' name='telephone'></td>
      <td><input type="button" value="Delete" class="delete" 
onclick="delete_row(this)"></td>
    </tr>
  </tbody>
</table>
<button onclick="add_row()">Add row</button>

Thanks a lot. I did some changes to js and it worked fine. – PramodHegde Oct 07 '17 at 21:41 — PramodHegde, Oct 07 '17 at 21:41

jquery event on dynmically created table row

1 Answers1