dynmically创建的表格行上的jquery事件

我有一个代码，它具有用于添加和删除行的按钮。我想在鼠标进入表格后立即更改背景，并在离开表格时恢复正常。我检查了所有在stackoverflow上的解决方案，没有什么是为我工作的。dynmically创建的表格行上的jquery事件

这里是表我的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=""; 
};

谢谢你

来源

2017-10-07 PramodHegde

你应该用js吗？你检查了CSS：悬停？ –

http://cr8code.co/editor.php?workid=73d94f24eff3a5116bff89aeea9ee9ae这是固定的网址 –

你的行变量也不是真的。那不是创建元素的方式，分配属性并追加它们。 –

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

来源

2017-10-07 20:35:20 Kreshnik

非常感谢。我对js做了一些改变，它运行良好。 – PramodHegde

dynmically创建的表格行上的jquery事件

回答

相关问题