Question

我有一个代码，其中包含添加和删除行的按钮。我想在鼠标进入表格后立即更改背景，并在离开表格时恢复正常。我检查了stackoverflow上的所有解决方案，没有什么对我有用。

这是我的表格的html代码：

 </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>

这是我的脚本代码：

 $(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="";
};

谢谢你

Answer 1

＆＃13;

//  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();
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

在动态创建的表行

1 个答案: