I have an HTML table created dynamically using an MVC application and the output of the table is as shown below:
In the onclick event of the edit button I want to show divText and hide divLabel of the same row using jQuery.
I have tried to get divLabel as shown below:
function EditRecord(elem) {
var divlabel = $(elem).closest('tr').children('td div#divLabel');
}<script src=".11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="divLabel">
value 1
</div>
<div id="divText" style="display: none">
<input type="text" value="value 1" />
</div>
</td>
<td>
<input type="button" value="edit" onclick="EditRecord(this);" />
</td>
</tr>
<tr>
<td>
<div id="divLabel">
value 2
</div>
<div id="divText" style="display: none">
<input type="text" value="value 1" />
</div>
</td>
<td>
<input type="button" value="edit" onclick="EditRecord(this);" />
</td>
</tr>
</table>I have an HTML table created dynamically using an MVC application and the output of the table is as shown below:
In the onclick event of the edit button I want to show divText and hide divLabel of the same row using jQuery.
I have tried to get divLabel as shown below:
function EditRecord(elem) {
var divlabel = $(elem).closest('tr').children('td div#divLabel');
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="divLabel">
value 1
</div>
<div id="divText" style="display: none">
<input type="text" value="value 1" />
</div>
</td>
<td>
<input type="button" value="edit" onclick="EditRecord(this);" />
</td>
</tr>
<tr>
<td>
<div id="divLabel">
value 2
</div>
<div id="divText" style="display: none">
<input type="text" value="value 1" />
</div>
</td>
<td>
<input type="button" value="edit" onclick="EditRecord(this);" />
</td>
</tr>
</table>But it is not working for me.
Share Improve this question edited Nov 15, 2016 at 22:16 Paul T. Rawkeen 4,1143 gold badges36 silver badges52 bronze badges asked Nov 21, 2013 at 11:38 SpiderCodeSpiderCode 10.1k2 gold badges25 silver badges42 bronze badges3 Answers
Reset to default 7You're pretty close. There are two issues:
Your HTML is invalid. You cannot reuse the same
idfor multiple elements. You can use a class instead:<tr> <td> <!-- Note 'class' rather than 'id' below --> <div class="divLabel"> value 1 </div> <!-- Note 'class' rather than 'id' below --> <div class="divText" style="display: none"> <input type="text" value="value 1" /> </div> </td> <td> <input type="button" value="edit" onclick="EditRecord(this);" /> </td> </tr>closestis right, butchildrenisn't. You wantfindinstead, because thedivisn't an immediate child of the row.
So assuming you change your HTML as per #1, we'd use find with a class selector for #2:
function EditRecord(elem) {
var divlabel = $(elem).closest('tr').find('div.divLabel');
}
Try This one It should work for me
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function EditRecord(elem) {
var chg = $(elem).closest('tr').children('td').siblings(':first-child');
chg.find('div:first-child').hide();
chg.find('div:nth-child(2)').show();
}
</script>
</head>
You don't need onclick="EditRecord(this);", delete that out. Doing it that way couples your javascript to your html which you can avoid using jQuery.
In jQuery do it like this
$("input[type='button'][value='edit']").click(function(event) {
var row = $(event.target).closest('tr');
row.find('.divText').show();
row.find('.divLabel').hide();
});
*Note change divText and divLabel to css classes because you can't have two id's in HTML with the same name.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743702644a4492833.html
评论列表（0条）