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>')));
Related
I asked a question yesterday (Button That When Clicked Will Display Hidden Column in HTML Table). The Name is self-explanatory however, after hours of trying new things and failing I decided to research a different approach. Here is what came up with:
A button that when clicked will append a new class to an element
By doing this, we will toggle a column's visibility by using the 'display' function in css
I have the following HTML element:
echo "<td class =\"development\" id = 'tag$i'>test1</th>";
echo "<td class =\"development\" id = 'tag$i'>test2</th>";
echo "<td class =\"development\" id = 'tag$i'>test3</th>";
$i is the row number so picture each of these <td> being wrapped inside a forloop to create a column.
With Css:
.development{
text-align:center;
padding-left:10px;
display:block;
}
.hide{
display:none;
}
So this is where I will need your help. I propose a button that when clicked will run a JavaScript function that can append the '.hide' class to the td tags.
<button onclick="addCss()">Click me</button>
I am not sure how to write the JavaScript and if I need to pass any parameters such as the id's for the <td> tags.
document.getElementById('yourId').className += ' ClassName'
//To select elements by class name.
document.getElementsByClassName('yourId')
Note: the space after the first ' for the appended class name is important.
Why? : If you have the class name "class1" and append "class2" - It will result in "class1class2"
By adding the space, it will result in "class1 class2" and be recognized as two separate classes.
<button onclick="document.getElementById('yourId').className += ' ClassName';">Click me</button>
If you want to make a better solution.
<script>
function addCss(element) {
document.getElementById(element).className += ' ClassName';
}
</script>
Then just call the function like you originally had. You could even add a parameter for the class name itself.
to override a class document.getElementById("id").className = "newclass";
to add a new class document.getElementById("id").className += " anotherclass";
function addCss(){
document.getElementById("b").className = "hide";
}
function newCss(){
document.getElementById("b").className = "show";
}
body {
font-size: 3em;
background: honeydew;
}
.hide {
display: none;
}
.show {
display: table-cell;
}
<table>
<tr>
<td id=a style="background:skyblue">A</td>
<td id=b style="background:yellowgreen">B</td>
<td id=c style="background:gold">C</td>
<td id=d style="background:orangered">D</td>
</tr>
</table>
<button onclick="addCss()">hide B cell</button>
<button onclick="newCss()">show B cell</button>
Using jQuery, you can add this in the addCss function:
$('td').addClass('hide');
I try to hide one cell of table using javascript. I want to send only id of the whole table to the function and than get to that cell using childNodes property.
Here is my code:
<head>
<style type="text/css">
.hiden{
visibility: hidden;
}
</style>
<script>
function change(){
t = document.getElementById('table');
row = t.node.childNodes[0];
row.node.childNodes[0].className='hidden';
}
</script>
<title></title>
</head>
<body>
<button onclick='change()'>Change</button>
<table id="table">
<tr>
<td>Hi</td>
<td>See you</td>
</tr>
</table>
</body>
I try to hide "Hi".
I get: Uncaught TypeError: Cannot read property 'childNodes' of undefined
on this line:
row = t.node.childNodes[0];
The larger goal is to show only 4 columns of longer table and showing hidden using next/previous buttons. If you know some library to do this please let me know.
Thank you for help.
At first, node is not available in the Node you got using document.getElementById('table');
JSBIN DEMO
Please make the necessary changes in the change()
function change() {
var t = document.getElementById('table');
var row = t.getElementsByTagName("td")[0];
row.className='hidden';
}
For pagination, You could use jQuery's :lt() and :gt() for implementation
In the CSS, you have a typo. The class name should be .hidden
You are accessing the cell wrong
change your js to the following:
function change() {
t = document.getElementById('table');
row = t.rows[0];
row.cells[0].className='hidden';
}
And it should work: Example
Also, please note you have spelt your hidden class wrong (missed a d)
You can use just one line:
function change() {
document.getElementById('table').rows[0].cells[0].className='hidden';
}
try below code,
<style type="text/css">
.hidden{
visibility: hidden;
}
</style>
<script>
function newchange()
{
var table = document.getElementById("table");
for (var i = 0, cell; cell = table.cells[i]; i++) {
//iterate through cells
//cells would be accessed using the "cell" variable assigned in the for loop
if(i == 0 || cell.id == 'firstCell'){
cell.className='hidden';
}
}
}
</script>
<title></title>
</head>
<body>
<button onclick='newchange()'>Change</button>
<table id="table">
<tr>
<td id="firstCell">Hi</td>
<td>See you</td>
</tr>
</table>
</body>
Loop through all cells and then control which cell to hide or show by using loop variable counter ('i' in this case) or by cell id.
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]);
I try to navigate in a table. Without the table it works, but with nope!
here's the code :
<table>
<th><div class="section selected">E1</div></th>
<th><div class="section">E2</div></th>
<th><div class="section">E3</div></th>
</table>
<br />
CLICK
then
$('#button').click(function(){
$('.selected + .section, .section:eq(0)')
.last().addClass('selected')
.siblings('.selected').removeClass('selected');
});
CSS
.selected{background:red}
And How to triggered the link with Enter Key?
Thanks!
this might want you want to do:
$('#button').click(function () {
var selected = $('.section.selected');
selected.removeClass('selected');
var tbl = selected.closest("table");
var th = tbl.find("th");
var index = selected.closest("th").index();
if(index < th.length-1) index++;
else index=0;
tbl.find(".section:eq(" + index + ")").addClass('selected');
});
this is the working DEMO.
The problem in your code was using jQuery siblings function, which goes through the all node siblings at the same DOM level, for instance if you had:
<table>
<th>
<div class="section selected">E1
</div>
<div class="section">E1 Sibling
</div>
</th>
</table>
then sibling function would select the E1 Sibling node, but non of .section nodes in your html are siblings.
I have created a div in HTML and want to add inner div dynamically to it. Below is the code for HTML:
<div id="table">
<div class="row">
This is the Demo First row Content.
<div class="cell1">
Cell 1 Content
</div>
<div class="cell2">
Cell 2 Content
</div>
</div>
<div class="row">
This is the Demo Second row Content.
<div class="cell1">
Cell 1 Content
</div>
<div class="cell2">
Cell 2 Content
</div>
</div>
</div>
<input type="button" value="Add New Row" onclick="addNewRow()" />
My CSS is:
div {
border: 1px dotted red;
padding: 10px;
}
And I have done the JavaScript for it but it is not working. The JavaScript is:
function addNewRow {
var table = document.getElementById('table');
var rDiv = document.createElement('div');
table.appendChild(rDiv);
rDiv.innerHTML = "This is the Demo Third row Content.";
var c1Div = document.createElement('div');
rDiv.appendChild(c1Div);
c1Div.innerHTML = "Cell 1 Content";
var c2Div = document.createElement('div');
rDiv.appendChild(c2Div);
c2Div.innerHTML = "Cell 2 Content";
}
But when I executed it, the new rows are not added. Please guide me what I am missing.
You have a typo preventing the execution of the function.
The correct name is document.getElementById (line 2 in JS).
You might want to enable the console (F12 IE debugger, Firebug, Developer Tools, etc) for debugging next time. These kinds of errors are very easy to spot.
Here is a working JsBin: http://jsbin.com/egImArO/1/edit
define javascript function like function addNewRow() { not a function addNewRow {
Just replace first js code line with this one:-
function addNewRow(){