I have a table that has the following td:
<td>
<div id="spcheck">
<div id="check"
data-1='<%# Eval("sth1") %>'
data-2='<%# Eval("sth2") %>'
data-3='<%# Eval("sth3") %>'>
<asp:CheckBox ID="chk1" runat="server"/>
</div>
</div>
</td>
This is the last one. It has custom attributes as you can see. I need to get the values data-1, data-2 and data-3 if have the checkbox cheked. I have the folowing code that gets each tr but I need to go inside the td and get the attribute values:
$('#ListView2_itemPlaceholderContainer tbody tr').each(function () {
// I GET THE <TR>
$(this).find('input:checkbox:checked').each(function () {
// I NEED THIS CODE
});
});
});
Thanks in advance.
Because the attributes are on the div , you need to find the div first and get the attributes of the div.. You can use the .attr() on the div to get them
$(this).find('input:checkbox:checked').each(function () {
var $closestDiv = $(this).closest('div'); // Find the div
var $data1 = $closestDiv.attr('data-1'); // data-1
var $data2 = $closestDiv.attr('data-2'); // data-2
var $data3 = $closestDiv.attr('data-3'); // data-3
});
$('#ListView2_itemPlaceholderContainer tbody tr').each(function () {
$(this).find('input:checkbox:checked').each(function () {
var dataElement = $(this).closest('[data-1]');
var data1 = dataElement.data('1');
var data2 = dataElement.data('2');
var data3 = dataElement.data('3');
});
});
});
$(this).attr('data-1');
should do the trick
see jQuery manual entry for attr
Related
I have a nested grid with is inside a 'div' element. I have a hidden element to determine if the div is expanded or not. I need to get the name of the hidden element (uniqueID) to set it. The jquery to open/close the grid is below:
function DivExpandCollapse(RecipientID) {
var div = document.getElementById(RecipientID);
var img = document.getElementById('img' + RecipientID);
var hiddenID = //div + ?? to ID the hidden element
var hiddenElement = document.getElementById(?????);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "Images/minus.png";
//Setting the hidden element to 'expanded'
hiddenElement.val("1");
}
else {
div.style.display = "none";
img.src = "Images/plus.png";
//Use ID of hidden element to set to 'hide'
hiddenElement.val("");
}
}
The div ID is defined in the markup:
<tr><td colspan="100%">
<div id="div<%# Eval("RecipientID") %>" style="display:none">
<asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static"/>
</div>
</td></tr>
you can use attribute selector in jquery
https://api.jquery.com/attribute-equals-selector/
your jquery selector will be like:
$('[style="display:none"]')
but if there is any inline styles with the display it will not select the element
"I need the hidden element to keep track of which grids are open". Perhaps you can try this:
Add an additional CssClass in your <asp>
Filter it using jQuery
$('.getThisID').click(function() {
var elem = $(this).find('.getMyID');
var id = $(elem).attr('id');
console.log(id); // Tadaaa, your ID here
// Then you can style $(this), either to display:inline, or create an additional img and set the img src
});
<tr>
<td colspan="100%">
<div id="div_<%# Eval("RecipientID") %>" class="getThisID" style="display:none">
<asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static" CssClass="getMyID"/>
</div>
</td>
</tr>
Without using jQuery you can do this:
var hiddenElement = document.getElementById(RecipientID).getElementsByTagName('input')[0];
Asp:HiddenField renders as a
inputp[type=hiudden]
I'm using mvc, I want to get the value of each and every td to edit in my table
<table>
<tr>
<td id="val"></td>
</tr>
</table>
<input type="button" value="" class="edit"/>
And in the javascript am using
var td = $(document).getElementById("val").innetHTML;
$(document).on('click', '.edit', function (e) {
if(td == null)
{
}
else
code......
})
But whenever am clicking the row edit button it is returning only the first row value, not getting the value of second and further.
Any suggestion will be greatly appreciated.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('.edit').click(function()
{
$('table td').each(function() {
var val = $(this).html();
alert(val);
});
});
});
</script>
You have to use 'class' attribute instead 'id':
<table>
<tr><td class="editVal"></td></tr>
<tr><td class="editVal"></td></tr>
<tr><td class="editVal"></td></tr>
</table>
You have to use JQuery for iterate each element:
$('.editVal').each(function(i) {
// get value
var $td = $(this).html;
// set value
$(this).html = 'Nuovo valore';
}
If you are trying to get the values of a table one by one, I think jquery each is the function for you.
There is also another question in SO with a good example.
I have an asp.net page - I am using jQuery datatables on it.
Part of the code is below:
<% foreach (SubmissionSearchResult result in SearchResults)
{%>
<tr data-name='<%=result.ID %>'>
So each time a row is drew on screen I am adding a data-name of result ID to it. What I want then is on clicking the row retrieve this ID.
I had something like the below to start :
$('#searchResultsTbl').on("click", "tbody tr", function () {
var nTds = $('td', this);
var id = $(nTds[0]).text().trim();
This worked when the id was in the first td in the row but now the columns can be dynammic and it may not be in the first column. So I wanted to add the id to each row and then get it from the row so I added it as a data-name but not sure on how to get the value back from it?
$('#searchResultsTbl').on("click", "tbody tr", function () {
var id = $(this).data('name');
});
try this
$('#searchResultsTbl tr:gt(0)').click(function () {
var this_row = $(this);
var data_name = this_row.attr('data-name');//row attribute
var first_td = $.trim(this_row.find('td:eq(0)').html());
var second_td = $.trim(this_row.find('td:eq(1)').html());
var third_td = $.trim(this_row.find('td:eq(2)').html());//and so on
});
add the javascript function on click event of row
like
<tr data-name='<%=result.ID %>' onclick='showid("<%=result.ID %>")'>
Now in javascript define this showid function
function showid(rowvalue)
{
alert(rowvalue);
}
I have two rows of a table here. When I click the checkbox in the first table row, I'm trying to target the ID of the span in the next table row. I have an alert in my code just to show me that I was successful.
What I have isn't working. I can't figure out a way to select data in the next table row when the checkbox in the first row is clicked.
<table>
<tr id="row-a">
<td>
<input type="checkbox">
<span>
some text
</span>
</td>
</tr>
<tr>
<td>
<span id="target">
some text
</span>
</td>
</tr>
</table>
$(document).ready(function() {
var myCheck = $("tr#row-a td input");
myCheck.change(function(){
var spanID = $("tr#row-a').next('tr').find('span').attr('id');
alert(spanID);
});
});
Try this:
var myCheck = $("tr#row-a td input");
myCheck.change(function(){
var spanID = $(this).closest('tr').next().find('span').attr('id');
alert(spanID);
});
Example fiddle
$(document).ready(function() {
var myCheck = $("tr#row-a td input");
myCheck.change(function(){
var spanID = myCheck.parents("tr").next().find('span').attr('id');
alert(spanID);
});
});
The change was in this line:
var spanID = myCheck.parents("tr").next().find('span').attr('id');
Which does the following:
Finds the checkbox's tr parent
Gets the next sibling node (next tr)
Finds the span
Gets its id
I have one Table that is named CustomPickedTable, this Table have rows with attribute such as <td Data-question-id="5">Example</td> and some of the rows do not have any attribute at all. just <td>example</td>.
I want to do be able to sort em into different hiddenfields, these are my hiddenfields:
#Html.HiddenFor(model => model.SelectedCustomQuestions, new { #id = "SelectedQuestionsWithAttr" })
#Html.HiddenFor(model => model.SelectedQuestions, new { #id = "SelectedQuestionsWithNoAttr" })
the code that I have right now is that all rows with attribute "data-question-id" gets filled to SelectedQuestionsWithAttr that is my hiddenfield for rows with attributes.
But I want that my Jquery code also fills those rows with no attributes gets filled to my SelectedQuestiosnWithNoAttr hiddenfield.
This is the code for Just filling SelectedQuestionsWithAttr hiddenfield:
var selectedQuestionsWithAttr = $("#SelectedQuestionsWithAttr");
var currentIds = new Array();
$("#CustomPickedTable").find("td").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
});
selectedQuestionsWithAttr.val(currentIds.join(","));
$("form").submit();
}
Is there any solutions that can I add to my jquery code for this?
Thanks in Advance
You would need to add something onto the <td> tags to be able to identify them:
<td id="noAttr#(Model.SelectedQuestions.IndexOf(variable))">
Then the jQuery would be:
var $qWithAttr = $("#SelectedQuestionsWithAttr");
var $qWithoutAttr = $("#SelectedQuestionsWithNoAttr");
var currentIds = new Array();
var missingIds = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
currentIds.push($(this).attr("data-question-id"));
});
$("#CustomPickedTable td:not([data-question-id])").each(function () {
missingIds.push($(this).attr("id"));
});
$qWithAttr.val(currentIds.join(","));
$qWithoutAttr.val(missingIds.join(","));
$("form").submit();