I am new to JavaScript and not long ago I ask the following question:
I have a normal HTML table where each row has its own id. What I want to achieve is that each time I click a link in a row the id for that row should be stored in a variable and later passed to a function. Let's say I click row#1 then id#1 should be passed and so on... How can I achieve this?
I got a very good answer. This example works in jsFiddle
http://jsfiddle.net/andrewwhitaker/9HEQk/
But if I copy the JavaScript and the table exactly like it is into a HTML file the whole thing just doesn't work and I can't find the answer. Could someone help me again please?
Thank you very much!
If all you need is the row id so why not using a simple code like this:
HTML:
<table id="table-one">
<tr id="row-one">
<td>one</td>
</tr>
<tr id="row-two">
<td>two</td>
</tr>
</table>
JS:
var lastRowId = -1;
function saveRow( id )
{
lastRowId = id;
}
Maybe I didn't fully understand what you asked?
Rotem
Related
Looking for some help on how to capture value for a specific TD cell. The challenge i'm faced with is that I cannot modify the TD cell to include classes or modify them as the table content are created dynamically by another system.
I created the fiddle below to give you an idea of what the structure of the table. As i explained above since I cannot directly modify the table structure or add extra classes to make it easier to target the TD cell I want, I am trying to Macgyver my way out of this one.
What I am trying to accomplish is this:
1) Need to capture the Reference number (Always 11 characters long and only contains numbers).
2) Put the captured reference number into a variable.
3) Concatenate the variable to the following url http://test.com/UpdateNotification.asp?OEN= (variable here) &CL=ALL&SU=ALL
4) Replace the Reference number with the URL.
So I am really having problems with the step 1 of this process. I would appreciate some help on this.
http://jsfiddle.net/W4Km8/5665/
<DIV class="sm_content">
<table border="1" width="100%">
<tr>
<td class="ms-vb2">reference numbers</td>
<td class="ms-vb2">name</td>
<td class="ms-vb2">Description</td>
<td class="ms-vb2">Incident</td>
</tr>
<tr>
<td class="ms-vb2">20150715110</td>
<td class="ms-vb2">Jhonson Doe</td>
<td class="ms-vb2">Box of cereal and other stuff</td>
<td class="ms-vb2">123</td>
</tr>
<tr>
<td class="ms-vb2">20150715111</td>
<td class="ms-vb2">Bobby Boucher</td>
<td class="ms-vb2">Box of nails and stuff</td>
<td class="ms-vb2">124</td>
</tr>
</table>
</DIV>
In the future, please make an effort before asking. That said, coders gotta code.
$('.sm_content table tr:gt(0)').each(function() {
var myId = $(this).find('td').eq(0).text();
var myUrl = 'http://test.com/UpdateNotification.asp?OEN=' + myId;
$(this).find('td').eq(0).html('' + myId + '');
});
Fiddle demo
Or, if you didn't actually want the ID linked, just do this for the last line:
$(this).find('td').eq(0).text(myUrl);
You have different ways to do it.
(function($){
$('.sm_content tr').slice(1).each(function(){
var td = $(this).find('td').first();
var tdContent = td.html();
td.html('' + tdContent + '');
});
})(jQuery);
Load the entire page into a string. I've used phpfilegetcontents but for an html only page I'd manually copy and paste the page into a text box and use document.getElementbyid('box').innerHTML to load the page's contents into a string
Find the first cell: entirepage.indexOf('td')
entirepage.slice(start from location of td plus enough characters to get past the rest of the tag, end 11 characters later)
that's your reference number
find the nth instance of 'td'
and so on.
no jquery necessary
On my website I have a schedule optimization for semester, classes, times, and locations. After optimization is run, several tables of choices show up. I want to show an empty semester in the table. here is an example of what I mean:
I know my table looks ugly, but I can't put blanks in the table to make the columns / side complete because i'm running complex calculations on the data in the table that would get disrupted if I were to put blanks in (it would try to do look-ups on blanks). I can't tell it to ignore the box if it's a blank either (Just go with me here). So, is there a way to add a note in that area that says "No classes for this semester" programmatically? The results are often different sizes so I can't like hardcode in a location on my website for the note. I need it to just know where to go. I didn't think this was possible but wanted to pose the idea to you guys. Ideas?
This would be the end goal:
--tons of results in form of tables ---
one example result:
IF it is even possible to close in the table so it's a complete box that would be great. ****I NEED A JAVASCRIPT / JQUERY SOLUTION
UPDATED: Based on the replies so far, I tried this:
if(classes.length === 0){
var $noClasses = $('<td></td>').html('No Classes available');
$noClasses.colSpan = "3";
$table.append($noClasses);
}
and this gave me
Use rowspan and colspan to accommodate the 'awkwardness' of your table structure. The table structure is still standard, you're just wanting to span your cells across rows and/or columns:
HTML
<!DOCTYPE html />
<html>
<head>
<style>
td,th{
border-style: groove;
}
</style>
<title></title>
</head>
<body>
<table>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
<th>Title4</th>
</tr>
<tr>
<td rowspan="3">Semester1</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
<tr>
<td>Class2</td>
<td>Time2</td>
<td>Loc2</td>
</tr>
<tr>
<td>Class3</td>
<td>Time3</td>
<td>Loc3</td>
</tr>
<tr>
<td>Semester2</td>
<td colspan="3">No Classes available</td>
</tr>
<tr>
<td>Semester3</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
</table>
</body>
</html>
Result
So here is the code that ended up working:
if(classes.length === 0){
var $noClasses = $('<td colspan="3"></td>').addClass('noClass').html("No Classes ");
}
but I had to take out some of the html/css from the javascript because it was getting too confusing to implement this part. I made a template with icanhaz and converted some of the code and then this worked.
The page I am trying to create is an edit page for different labtests. Each labtest has different results that fall under it and different normal ranges (hence the Min/Max) so the values are from a SQL SELECT statement in PHP then sent to Smarty. I am using BootStrap hence why I went with X-editable.
I want to use X-editable to edit these lab test values, but am running into issues in the foreach statement. The edit function works for the first row, but not the following rows. My understanding is it is because they have the same id (I.E. a id=""). Is there any way around this? I am quite new to JS so I am struggling to come up with solutions.
Shooting in the dark here, but I could try using the PK in addition as part of the id and send the array to the JS to loop through as well to make the link editable in JS? It seems a bit silly logically though so hopefully there is a better way?
Here is what I have done.
<table class="table table-striped">
<thead>
<th>Test Type</th>
<th>Measurement Unit</th>
<th>Min. Male</th>
<th>Max. Male</th>
<th>Min. Female</th>
<th>Max. Female</th>
<th>Min. Child</th>
<th>Max. Child</th>
</thead>
{foreach from=$alltests item=alltests}
<tr>
<td>{$alltests.valuename}</td>
<td>{$alltests.Units}</td>
<td>{$alltests.MaleMin}</td>
<td>{$alltests.MaleMax}</td>
<td>{$alltests.FemaleMin}</td>
<td>{$alltests.FemaleMax}</td>
<td>{$alltests.ChildMin}</td>
<td>{$alltests.ChildMax}</td>
</tr>
{/foreach}
{literal}
<script>
$(document).ready(function() {
$('#TestName').editable();
$('#TestPrice').editable();
$('#valuename').editable();
$('#Units').editable();
$('#MaleMin').editable();
$('#MaleMax').editable();
$('#FemaleMin').editable();
$('#FemaleMax').editable();
$('#ChildMin').editable();
$('#ChildMax').editable();
});
</script>
{/literal}
Thank you for your time!
Have you tried doing it with one class instead of id?
<td>{$alltests.valuename}</td>
<td>{$alltests.Units}</td>
and so on, and then:
$('.is_editable').editable();
I want to create a html page that get data from a website table (not a database table -html one)
The code looks sorda like this:
http://jsfiddle.net/wpVtc/
I tried to use jQuery ".find" but I couldn't get it to work.
It dosn't have ANY classes of id's .
Then, when I get the data I want to display only that.
Thank u!
~Stephan
EDIT:
The data is always going to be at the same place and it as always going to end with either 'GB' or 'MB'.
If the data is always in the same position you could use .eq(n).
So if you example is:
<table>
<tr>
<tr> <--- i assume this is wrong
<td>
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>DATA I WANT</tr>
the selector would be:
"table tr td table tr:eq(6)"
See: http://api.jquery.com/eq-selector/
Another solution:
"table tr td table tr:contains(DATA I WANT)"
See: http://api.jquery.com/contains-selector/
My question is! I am copying content from one table to another table and when I am doing this I need the function name to change to talentselect instead of driverselect which is attached to each table row. I still need to keep the variable values to parse. Just wondering if anyone can help me with this. I know that I should be binding the events to the elements with Jquery and not using OnClick but for now I need a solution to achieve this with the OnClicks.
Many Thanks!
The copying of the table
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="odd" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
</table>
<table id="talentselectiontable" cellspacing="0">
</table>
$("#talentselectiontable").html($("#driverselectiontable .chosen").clone(true).attr("class","odd"));
So basically I am copying all of the table rows that have the class named "chosen" but upon doing so I need to change the function call name to "talentselect". But each row in the table has different parameters being parsed which is allocated with PHP.
I have tried this piece of code but it is not working still
$("#talentselectiontable tr").attr("onclick").replace("driverselect", "talentselect");
I can't see the actual HTML of your table, so this may be slightly incorrect, but should get you started.
$("#talentselectiontable tr").attr("onclick", "return talentselect(this, value, value);");
This whole problem would actually be a lot easier if you used event handlers rather than inline onclick attributes. You could then use the jQuery live() function (see http://api.jquery.com/live/) that would mean that JQuery would take care of changing the function for you. Your solution would look something like this:
$("#driverselectiontable tr").live('click', driverselect);
$("#talentselectiontable tr").live('click', talentselect);
And then whatever code to ensure that your cloning code gets called.
Edit: In response to the comment, it looks like this is what you're after:
var clickval = $("#talentselectiontable tr").attr("onclick");
$("#talentselectiontable tr").attr("onclick", clickval.replace('driverselect', 'talentselect'));
That should get you going.
With a view to better JavaScript practice however, I would recommend another approach entirely. Rather than storing your parameter values in the 'onclick' attribute, store them in a data attribute. So your HTML would look something like this:
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" data-myparam1="value" data-myparam2="value"><td>driver</td></tr>
And so on. You can then use JQuery to parse the values:
function driverselect() {
var row = $(this),
param1 = row.attr('data-myparam1'),
param2 = row.attr('data-myparam2');
// rest of the code goes here
}
Your markup will be cleaner, and you can use the live() jQuery functionality as described above.