function td(id)
{
var td=document.getElementById(id+'');
var table = document.createElement('table');
var tbody=document.createElement('tbody');
var tr = document.createElement('tr');
var tdchild = document.createElement('td');
tdchild.innerHTML="<input type=text name=txt size=2>";
tr.appendChild(tdchild);
tbody.appendChild(tr);
table.appendChild(tbody);
td.appendChild(table);
}
I want to generate a table in side a td on click of a button. Its not happening this way?
Your code looks correct to me, and it seems to work as expected.
Check this fiddle.
Are you sure you are calling the td function with the right ID, and that the ID is in the td element, and not in the table element?
That works for me. Do you have a click listener defined that will run this function? Does a td exist with the specified id?
Related
I've tried with a stupid way of inserting code for a new table, but not even that seems to work. What would be the proper way?
Here's what I tried to do:
var table = document.getElementsByClassName("test")
[0].getElementsByClassName("tableclass");
for (var i = 0, l = table.length; i < l; i++) {
var content = table[i];
let s = content.innerHTML;
s = s.replace(/table/g, 'table border="1"');
s = s.replace(/tr>[\s\S]*?<tr>[\s\S]*?<td>3/g, 'tr>\r\n<tr>\r\n<td>3');
content.innerHTML = s;
}
And a fiddle: https://jsfiddle.net/d10tk7nr/1/
Also, the reason my stupid way doesn't contain the whole table is because some of the cells where I want to eventually use this would contain random data and I don't know how to skip that.
If you want to create a new HTML-Element, every browser got you covered on that.
var tr = document.createElement('tr');
console.log(tr);
The browser console will show you exactly what you have created - a new HTML element that is not yet part of the DOM:
<tr></tr>
The same goes with the creation of some content for that table row:
var td1 = document.createElement('td'),
td2 = document.createElement('td');
td1.innerText = '5';
td2.innerText = '6';
console.log(td1, td2);
The result will be two td-elements:
<td>5</td> <td>6</td>
Now we have to glue these parts together. Browsers will also have you coverd on this:
tr.append(td1);
tr.append(td2);
console.log(tr);
The result is a complete table row:
<tr><td>5</td><td>6</td></tr>
All we have to do is append this row to your table:
var table = document.querySelector('.test table tbody');
table.append(tr);
The elements you have created are now part of the DOM - child elements of the body of your table to be excact.
Click here for a fiddle
Edit
If you want to insert the new row to a specific place, you have to find the element you that should be next to it and use insertBefore. This would change the the last piece of code to:
var targetTr = document.querySelector('.test table tr:nth-child(2)');
targetTr.parentNode.insertBefore(tr, targetTr);
If you want to choose where to put your new row within your javascript, you can use the childNodes property:
console.log(table.childNodes);
I'd use insertAdjacentHTML, like so:
table[i].insertAdjacentHTML('beforeend', '<tr><td>5</td><td>6</td></tr>');
Please see this fiddle: https://jsfiddle.net/52axLsfn/4/
Also demonstrates how to set the border. Note that this code targets all tables, so depending on your situation you may want to be more specific.
I created a html table and filled it dynamically. So I want to alert the data inside a cell of the table when i clicked it. Here is the code for the table
JSP
<table id="load-opt"></table>
I'm filling the data inside dynamically like this
var fillTable = function($element, data) {
var t_head = $("<tr></tr>");
for(var ind=0; ind<data.length; ind++) {
//name is the name and desc is the description for each option
var $option = $("<tr></tr>");
$option.html("<td>"+name+"</td><td>"+desc+"</td>");
}
};
I tried this but it's not working, it's giving "undefined".
var choice = $('table#load-opt tr td');
choice.click(function(){
alert(choice); // also tried alerting choice.textContent, choice.innerHTML and choice.firstChild
});
you are actually trying to alert the 'td' object not value of from that object so you can use following to solve the query.Here i am using on instead of direct click function because of dynamically added data.
var choice = $('table#load-opt tr td');
choice.on('click', function(){
alert($(this).text());
});
You can use $(this).text() to fetch the data in table cell.
This is a link.
I have a table like this.
<table id='table1'>
</table>
and in this table i am dynamically adding rows to the table using jquery like below.
var tbl = $("#table1");
tbl.append('<tr></tr><tr></tr><tr></tr>');
I can add class to the appended rows using 2 methods like below
case 1
tbl.find('tr').eq(0).addClass("test");
tbl.find('tr').eq(1).addClass("test");
or case 2
for (var i=0;i<tbl.find('tr').length;i++) {
tbl.find('tr').eq(i).addClass("test")
}
and my question is there any way i can add same classname to the dynamically appended rows. Answers expecting in jquery. Thanks in advance.
Once an element is added to the DOM, you have no way of telling if it was dynamically added or not unless you have custom code that does such. I would suggest changing .append to .appendTo so you have access to the rows you're adding and can call .addClass:
var tbl = $("#table1");
$('<tr></tr><tr></tr><tr></tr>').appendTo(tbl).addClass("test")
You could also put the class in the string then append it or modify it (add a class) prior to appending it. Note how I only have one tr in my string but append it multiple times (optionally adding a class as noted)
var tbl = $("#table1");
var tr = '<tr class="test"></tr>';
var td = '<td class="test">new data</td>';
//var addedrow = $(tr).append(td).addClass("newclass");//adds class to the row
var addedrow = $(tr).append(td);//create new row object
addedrow.find('td').addClass("newclass"); //adds class to the td in the new row
var ar2 = $(tr).append(td);
var ar3 = $(tr).append(td);
tbl.append(addedrow, [ar2, ar3]); // appends the new rows
tbl.find('tr').last(td).addClass("newclass");//add class to last rows td
see it in action here: http://jsfiddle.net/MarkSchultheiss/0osLfef3/
I have a number of calendars on a page. These are made up of HTML tables and each day is a td. Each td has an onClick attribute which I cannot remove or modify in the HTML. I am removing all onClick attributes from the days apart from Friday and Saturday using the following jQuery:
var kalvoid = jQuery(".kc_mainTable tr td:nth-child(1),.kc_mainTable tr td:nth-child(2),.kc_mainTable tr td:nth-child(3),.kc_mainTable tr td:nth-child(4),.kc_mainTable tr td:nth-child(7)");
jQuery(kalvoid).removeAttr("onClick");
The problem I have is that I also want to remove the onClick attribute from friday as well and then re-add it if a user clicks on a Saturday. I have been playing around with the following code:
var kalfri = jQuery(".kc_mainTable tr td:nth-child(5)");
var kalsat = jQuery(".kc_mainTable tr td:nth-child(6)");
jQuery(kalfri).removeAttr("onClick");
jQuery(kalsat).click(function() {
(function(kalfri){
var kalfriID = jQuery(this).attr("id");
jquery(this).attr("onClick", kalfriID);
});
});
This obviously isn't working (even I can see that the code is wrong), the problem is that I don't know the correct jQuery to do this. I have been playing around with this for some time with no luck. Any ideas?
Thank you.
You could just store it in data()
jQuery(function($) {
var kalfri = $(".kc_mainTable tr td:nth-child(5)");
var kalsat = $(".kc_mainTable tr td:nth-child(6)");
kalfri.data('onclick', kalfri.attr('onclick')).removeAttr("onClick");
kalsat.click(function() {
var kalfriID = kalfri.data('onclick');
kalfri.attr("onclick", kalfriID);
});
});
And you don't have to use jQuery everywhere
I think I know this is an IE bug ...
I need to add new row to an HTML table at the exact position.
(don't want insertRow(index) cuz this looks like gonna be better for some other reasons)
function AddNewItem(td) { ///td comes from button at the HTML code, <input ... onclick="AddNewItem(this.parentNode)"
var grid = GetGrid();
var itemIndex = $(td.parentNode).attr('index');
///alert(itemIndex + "'e eklenecek");
var newRow = document.createElement('tr');
var td1 = document.createElement('td');$(td1).addClass('td');
var td2 = document.createElement('td');$(td2).addClass('td text r');
var td3 = document.createElement('td');$(td3).addClass('td text r');
var td4 = document.createElement('td');$(td4).addClass('td text r');
$(newRow).append(td1);$(newRow).append(td2);$(newRow).append(td3);$(newRow).append(td4);
grid.insertBefore(newRow, td.parentNode); ///THIS GIVES AN INVALIDARGUMENT error .. Any solutions will be appreciated :)
}
function GetGrid() {
var grid = document.getElementById("MasterTableView");
return grid;
}
My guess is that td.parentNode is not a child element of grid. Take a look at the W3C specification for insertBefore to make sure that you are calling the method with valid parameters.
I would guess that you're passing in an invalid argument to AddNewItem, that (in IE, at least) it's not a td element like you think.