I have a html table displayed in a showmodal dialog window, the html-body has several divs, each div having several tables, tr and td within them.
The user will update entries within the input tag so i need to capture the change.
One such div looks like below. How to I retrieve all these values on a button click. I have heard of serialize() method. Will it work for all tag types, "insert","select", "option" etc etc.
<div>
<table>
<tr><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td>
</tr>
</table>
</div>
Apologies, writing my solution in a pseudocode fashion:
//I created a div container and then loop through all the divs
//then retrieve values using one of the below
$("classname > div[id]").each(function(){
var a= document.getElementsByName("name of the tag"); //by name
var b= document.getElementById("id of the tag"); //by id
var c= $("input[class='"+trd_id+"']:checked").val(); // for radio button
});
// loop by div counts and alert the values. Solved my problems
Related
I have a little problem with finding cell's id (and its content). Main table contains multiple divisions and each division contains one table with several cells. What I want is to display cell with id content_xx. My tables look like this:
<table id="MainTable"> // Main (global) table
<div id="divid_1"> // First div in main table
<table id="InfoTable"> // First div's table
<td id="title_10">CellTitle</td> // Cell #1
<td id="content_11">CellContent</td> // Cell #2
<div id="divid_2"> // Second div in main table
<table id="InfoTable"> // Second div's table
<td id="title_20">CellTitle</td> // Cell #1
<td id="content_21">CellContent</td> // Cell #2
// etc...
</table>
Function for finding it:
function FindContent(id)
{
t = document.getElementById("InfoTable").rows[0].cells.namedItem("content_"+id).innerHTML;
alert(t);
return;
}
I have onclick event which executes this function. It works for me only for first InfoTable, but it does not work when I try same thing on table #2 or further. I get this error: TypeError: document.getElementById(...).rows[0].cells.namedItem(...) is null. How can I fix this and why it does not work? Is it because of row[0]? If I change to row[1], for example, then it doesn't work at all. I can change structure of html but not completely.
** Solved by icecub **
The problem was that I was using same ID in divs, therefore, only first table would have been returned. I just needed to use different ID.
I have a simple HTML page where I will be having few rows, each row specifies a record in database, I have some input fields on each to collect and a link at the end, when I click that I need to collect the input field values on the same row.
The HTML goes like this:
<tr>
<td>Name</td>
<td><input name="mode_sort"/></td>
<td><input name="mode_selected" type="checkbox"/></td>
<td>Add</td>
</tr>
So I will be writing my code to collect input fields on the row when I click the "Add" link, I'm not sure how to pass the current clicked selector and get the field values with that in add_this_mode() function.
Within the function you can use jQuery traverse methods to isolate the parent row and then to find elements within that row
function add_this_mode( elem){
/* get parent row */
var $row = $(elem).closest('tr');
/* use find() to get other elements in row */
alert( $row.find('[name=mode_sort]').val() );
}
I have an html table that looks like the following:
<table id="tree">
<tr id="foo-1">
<td>fooId1</td>
<td>fooName1</td>
<td>fooCsv1</td>
<td><button id="button-1" type="button" disabled>Save</button></td>
</tr>
<tr id="foo-2">
<td>fooId2</td>
<td>fooName2</td>
<td>fooCsv2</td>
<td><button id="button-2" type="button" disabled>Save</button></td>
</tr>
</table>
There are two modifications I want to do to this table:
-First, I want to make the fooName and fooCsv td elements editable (there are actually a couple more editable columns, but I'm just using two to make this example simpler). I know that I can simply put an input inside the td element and set the value, but was wondering if there's a simpler way.
-Second, I want the Save button in each row to become enabled when a user changes the text in that row via typing/copy-paste/etc. I've googled and found that I might be able to do this by adding a handler for an input event, but I'm not sure of the simplest way to incorporate this, and I'm not sure if it has ramifications for the first task I have.
I think this should be easy if I knew much about html and javascript, but I don't, so does anyone know a simple way to achieve what I'm trying to do?
<td contenteditable="true">fooName1</td>
And use what ever you want to post the table HTML
edit:
http://jsfiddle.net/9yyKN/11/
//Listen to blur event in contenteditable td elements
$('td[contenteditable=true]').blur(function () {
$(this).parent('tr').find('button').removeAttr('disabled');
});
//When a button is clicked find the nearest contenteditable td //element(s) and push their
text content to an array, this array is later being posted.
$('button').click(function () {
var contents = $(this).parents().find('td[contenteditable=true]');
var contentArray = [];
for (i = 0; i < contents.length; i++) {
contentArray[i] = contents[i].innerHTML;
}
$.post("test.php", contentArray);
});
In my Java program I have a List<DemoTable>.
List<DemoTable> demotable = new ArrayList<DemoTable>();
DemoTable is a class with id,name,and details variables.
I display these details using Jquery..
<table>
<c:forEach items="${modalAttribute.demotable}" var="demo">
<tr class="M_row_bg M_read">
<td><input type="checkbox" id="isDelete"/></td>
<td><label for="name">${demo.name}</label></td>
<td><label for="totalExperience">${demo.details}</label></td>
</tr>
<c:forEach>
</table>
Data will be displayed correctly ... but when check box is clicked I want to get Table row id:
$("#isDelete").click(function(){
if (this.checked){
alert('checked');
alert(demo.id);
} else {
alert('unchecked');
}
} );
I expect this alert to give the DemoTable id, but this alert does not show. Also, this click only works for the first row of the table.
How can I get the DemoTable id when I click the check box?
What does my code need to work with each row of table click event, not just the first row?
you're using #isDelete multiple times in the table. This is illegal, and the reason your code only works on the first row. Use a class instead.
your table rows don't even have an ID. They do however have an implicit index.
you should give your table an ID
you can use "event delegation" and just register a single click handler on a common parent element (i.e. the table) which then uses event bubbling to figure out which actual element was clicked. This can be more efficient than registering the exact same event handler explicitly on every matching element.
Try this instead:
$('#myTable').on('click', '.isDelete', function(){
if (this.checked) {
var rowId = $(this).closest('tr').index(); // row within table (0 based)
}
});
I've asked a lot of jQuery questions recently as I'm trying to use it rather good old Javascript, as I mentioned in previous questions, "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "
Now what I'm doing is once the backend is rendering a table to the interface I wish to loop through the tr elements of the table, within one of the td elements of the tr there are two radio buttons. I need to determine the name of the radio button group as I don't define them, the systems does using a GUID or something?
This is the table for example...
<table id="tableID">
<tr>
<td class="qCol">
<!-- Label here -->
</td>
<td class="qCo2">
<!-- img here -->
<!-- and a text box -->
</td>
<td class="qCo3">
<!-- select menu here -->
</td>
<td class="qCo4">
<!-- radio buttons here -->
</td>
<td class="qCo5">
<!-- select menu here -->
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
Okay, I'm looping through the table and at the same time switching the innerHTML of one cell to another and hiding some of the rows, I'll be adding functionality to show these later, here's the jQuery:
$('#tableID tr').each(function (i) {
/*switch select and validation and clear */
$(this).children('td.qCol').html($(this).children('td.aCol5').html());
$(this).children('td.aCol5').html($(this).children('td.vCol'.html(""));
/* hide all but the first row*/
if (i >= 1) {
$(this).hide();
}
now I'm trying to determine the name attribute of the radio buttons that will be in the cell with class .qCo4, however I'm having no luck as the following returns an error and is "undefined"...
/* get the radio button name and check if either are selected*/
// check something exists...
if ($('input:radio', this).attr('name')) {
var thisRadioName = $(this).closest("input:radio").attr('name').val();
alert(thisRadioName);
}
$this is the tr element, so should I be using child rather than closest? If this makes no sense I can expand and explain better.
you should use find() or children(). closest() goes up the tree, while find looks for elements down the tree
var thisRadioName = $(this).find("input:radio").attr('name');
you can use also ':checked' to check if any radio is checked
var checkedRadio = $(this).find("input:radio:checked")
You should use children if you are absolutely sure that the elements you are looking for are direct child of the element, otherwise use find(). (using finds protect you from refactoring code if you modify the html, like adding a wrapping div for other reasons like styiling)
look at this fiddle: http://jsfiddle.net/nicolapeluchetti/Evq6y/
var thisRadioName = $(this).find("input:radio").attr('name');
should do what you want