We Keep Coding

Increment var in td

I am trying to increment a var when I add a new tr
Table
<table id='myTable'>
<tr>
<td id="count"></td>
<td><select><option value="1">1</option></select></td>
<!--obviously some more options-->
</tr>
</table>
<button onclick="addfield()">Add</button>
Script
<script>
var row = 1;
function addfield() {
document.getElementById("count").innerHTML = row;
$("#myTable").find('tbody').append($('<tr>').append($('<td id="count">')).append($('<td><select><option value="1">1</option></select>')));
row++;
}
</script>
What's happening is, that the script is incrementing the first 'td id="count"'-Tag when adding a new 'tr'-Tag instead of incrementing the next 'td'-Tag. Additionally it doesn't show the count in the new generated 'td'-Tag.
What am I missing?

Okay, so first off let me go ahead and say that I blew up your HTML structure because it looks to me like you are using a table to do something that is not tabular, so I changed the structure to be divs. I also took the incrementing out of your script and used CSS counters to get the same effect. if using a table to hold your data is critical after all, then I guess you won't choose this answer.
HTML
<div id="myTable">
<div class="row">
<div class="cellish"><select><option value="1">1</option></select>
</div>
</div>
</div>
<button onclick="addfield()">Add</button>
CSS
body {
counter-reset: count;
}
.cellish {
display: inline-block;
}
.cellish::before {
content: counter(count) " ";
counter-increment: count;
}
JS
function addfield() {
$("#myTable").append($('<div class="row">')).append($('<div class="cellish"><select><option value="1">1</option></select>'));
}

You should not use the same id multiple times in html elements.
Change like this:
$("#myTable").find('tbody').append($('<tr>').append($('<td><select><option value="1">1</option></select>')));

Duplicate Inner div inside of the Outer div

I am trying to duplicate some divs. I am able to do this, however, when my div is duplicated it is being duplicated on top of my other content. I would like for it to be duplicated in the same div but it seems to be doing it outside of the div. Below is my code, any suggestions?
I think the problem lies within the last line of the javascript function with the parent node append child but I am not sure.
JS
<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicator');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "gamesdiv" + ++i;
original.parentNode.appendChild(clone);
}
</script>
HTML/MARKUP
<div id="gamesdiv">
<div id="duplicator">
<table>
<tr>
<td>type</td>
<td><asp:TextBox ID="gamestype" runat="server" Height="16px" Width="92px"></asp:TextBox></td>
<td>name of game: </td>
<td><asp:TextBox ID="namegame" runat="server" Height="17px" Width="118px"></asp:TextBox></td>
</tr>
</table>
</div>
</div>
<button id="button" onclick="duplicate()">Add new game</button>
The gamesdiv is the div I would like for it to be duplicated in and the 'duplicator' div is the div I am duplicating. If you would like to view my html code please ask

It seems like you have two issues:
The first is the gamesdiv height is set to 85, which limits it.
Next, some of the markup has an invalid close (you have a div that looks like <div/> instead of </div>
I have fixed both of these issues here and tweaked your styles slightly:
http://jsfiddle.net/xDaevax/7LLXZ/

Please check this js fiddle: http://jsfiddle.net/Gb69f/
It is solved your problem or not? If not then please tell me what is the problem?
JavaScript
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicator');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "gamesdiv" + ++i;
original.parentNode.parentNode.appendChild(clone);
}

How to remove Options from multiselect dropdown in Jquery

I have some table column with some preselected values and now i want to remove those selected values from dropdown(ddlMultiselect) .. Both table column and dropdown option values are same and what i want that those values should be hide/remove from dropdown as per if condition.
$('#sometabletr:gt(0)').each(function () {
var row = $('td:eq(0) > span', this).text();
$('#ddlMultiselect :selected').each(function () {
var col = $(this).val();
if (row == col) {
$(this).remove();
}
});
});

This is the way is do it, fast and easy way
$('#listname option:selected').each(function (index, option) {
$(option).remove();
});

There is another way to approach this issue.. but setting up classes on the table rows, all you have to do is change the class of the table element itself to hide/show vast amounts of things while only doing a single repaint, which GREATLY improves performance.
In this example, I have the adding of a class hard-coded, but you could use jQuery's addClass and removeClass or look up the best alternatives available.
<doctype html>
<html>
<header>
<title>Demo HIde</title>
<style>
#mytable.even tr.odd {
display:none;
}
</style>
</header>
<body>
<table id="mytable">
<tr class="odd"><td>1</td></tr>
<tr class="even"><td>2</td></tr>
<tr class="odd"><td>3</td></tr>
<tr class="even"><td>4</td></tr>
<tr class="odd"><td>5</td></tr>
<tr class="even"><td>6</td></tr>
</table>
<script>
// Show the even values only
document.getElementById("mytable").className += " even";
</script>
</body>
</html>

Appending a table to another table in the DOM. Targeting with no class or id available

I am currently attempting to append a specific , via jquery, to another table. Here's the HTML, and the two elements involved in the move.
<div id="content_area">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td></td></tr>
<tr>
<td></td> <-- TD needing to move -->
</tr>
</tbody>
</table> <-- Needs to move-->
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<tr>
<td width="190" valign="top">
<table width="100%"></table>
<-- Move Above TD Here -->
</td>
</tr>
</tbody>
</table>
</div>
Although I'm hardly experienced with jquery/javascript, I have used the following method in the past to append a div to another div.
$(".target").appendTo($(".destination"));
This method I have used in the past required that the elements have some sort of unique identification. Since this is not possible with the current site I am developing (The software has locked down the HTML), how can I target these two tables in order to make the append?
You can view the issue at the following page:
http://xlevj.jyetp.servertrust.com/Pro-Audio-Equipment-s/1824.htm
It's pretty obvious to see on that page what I'm trying to accomplish with the move. Thanks for any help!

Try this:
//Find the td we want to move.
var tdToMove = $('#divWaitModal + table > tbody > tr:nth-child(2) td');
//Find the td we want to insert into after.
var tdToInsertAfter = $('#divWaitModal + table + table tr:first-child td:first-child');
//Detach the td to move.
tdToMove.detach();
//Insert it at the proper place.
tdToInsertAfter.after(tdToMove);

Just use child number of the node and target trough that :
$('body table:first-child').appendTo( $('table:eq(1) td:eq(0)') );
In words it takes the first table and it's appending it to second table > first cell. You can use :eq( number ) where number starts from 0, or first-child selector in some cases ..

This CSS might accomplish what you're after:
#content_area {
overflow: hidden;
}
#content_area table {
display: inline;
float: left;
}
If you want to target the elements, you can use the #content_area as a selector:
var $tables = $('#content_area>table');
var $table1 = $(tables[0]);
var $table2 = $(tables[1]);

Changing background color of all elements with the same class

I have a link and a table row that have matching classes. When the link is clicked, I would like to change the background color of the row with the same class. For each case, there will be only one row with the same class.
Here is my current function.
<script type="text/javascript">
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].bgColor="blue";
}
}
</script>
Here is a part of the table row script:
<tr class="alt1 12">
<td width="50" height="55">
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td>
<td>
<div class="forumtitle">
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div>
</td>
<td width="25">
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div>
</td>
</tr>
The table row has two classes, and I need the second one (the number) to be what is addressed. The current code gives the error "An invalid or illegal string was specified"

You have several errors. You mixed classes with ids and also the class property is actually className
<script type="text/javascript">
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor="blue";
}
}
</script>
change first row
change second
<!-- FIX ( id -> class ) FIX ( class -> className ) -->
<table>
<tr class="first">
<td>test1</td>
</tr>
<tr class="second">
<!--FIX ( id -> class ) -->
<td>test2</td>
</tr>
</table>
Check this jsfiddle

You can also do it easily without jQuery with querySelectorAll():
<script type="text/javascript">
function check(selector)
{
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "blue";
}
}
</script>
change first row
change second
<table>
<tr class="first">
<td>test1</td>
</tr>
<tr id="second">
<td>test2</td>
</tr>

jQuery simplifies it:
$(".button").click(function(){
var class = $(this).attr("data-class");
var color = $(this).attr("data-color");
$("."+class).css("background-color",color);
});
.button is the class to apply to the button, add data-class for the class you would like to change the background color of, and data-color is the color you would like to change it to.

Had same issue. Needed to change background of all elements in pure js (dark theme). Wasn't able to add jQuery on a page cuz of some weird error (This document requires 'TrustedHTML' assignment)
elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor="#777";
elements[i].style.color="#ddd";
}