I'm adding an input element to my HTML table with Javascript like this:
var nameCell = row.insertCell(0);
nameCell.innerHTML = data[i].Title;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
if (data[i].COMPLETED == true) {
checkbox.checked = true;
} else {
checkbox.checked = false;
};
row.appendChild(checkbox);
But the input is appearing outside the table:
How can I fix this?
Notice that the checkbox is indeed part of the row, which I've highlighted in gray. My only issue is that the row lines don't extend to the full width of the row.
You're trying to append the checkbox to the row instead of to the cell.
It is, therefore, a sibling of the cell.
The cell takes its normal place in the row, which means the row has to be extended to allow the cell to be placed next to the cell.
You have to add the input to the last td of the row :
var nameCell = row.insertCell(0);
nameCell.innerHTML = data[i].Title;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
if (data[i].COMPLETED == true) {
checkbox.checked = true;
} else {
checkbox.checked = false;
};
var cells = row.getElementsByTagName("td");
var lastcell = cells[cells.length -1];
row.appendChild(checkbox);
Container inside a table is table cell, not table row. Put it inside the row, and HTML table would not be able to render it correctly. Put it inside the table cell, it will appear as per format.
Bootstrap’s grid system, and most of layout system uses a series of containers, rows, and columns to layout and align content. These containers, rows and columns are created through css classes through elements like div, span, nav etc. It does not use HTML table for grid system layout. So, it will not be able to structurally place your checkbox correctly for visual rendering, when not added to table cell.
Use colspan if you want to design with HTML table. Apply proper width to table and cells, and append checkbox to table cell.
To a row, you can append a container cell. But you should not append another element to a row which will have its own visual representation. If appended to table row, while rendering, browser would not know where to place it inside the table bounds.
"Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure"
Related
Here is the scenario:
User clicks on a button and can add new row in table.
Select a value from any of the row and few fields will be added in only that row. It works fine.
But problem is here: When user again selects any different rows it append the cells in rows, but I want to delete the previous cells and add new selected cells. I am not able to do that.
I tried with deleteCell() but did not find required solution. here is the whole code. If any one could help please.
Another problem with code is when I run it the first time it does not count first row number.
for (i = 0; i < selectedvalue; i++) {
var x = Row.insertCell(-1);
x.innerHTML = "<td><select><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option></select></td> </tr>";
}
Try this:
http://codepen.io/anon/pen/yeZrov?editors=1010
jQuery('#myTable tr').eq(rownum).find("td:gt(3)").remove();
I have a HTML table in which a few td's are fixed and the rest are dynamic. So as of now (when all fields are static), the table looks like this
label1 tb1 | label2 tb2 | label3 tb3 | label4 tb4
Label Names and corresponding textbox values would both be dynamic.I have fetched the dynamic values from the table and stored them in a Javascript array. I now need to display those stored values by appending them to the static table present above.
But there's a condition in this. The dynamic fields need to be appended at a specific position. They need to be added after tb3.
Since one row can contain max of 4 elements, so any additional fields need to be pushed to next row. For Eg: If I get 3 dynamic td's from the database, then the new table needs to look like
label1 tb1 |label2 tb2 |label 3 tb3 |dynalabel1 dynatb1
dynalabel2 dynatb2 |dynalabel3 dynatb3 |label4 tb4
The label 4 and its value is a static component and so needs to be pushed to the end.
I have searched a lot but i can't find HTML column creation at a specific location.
I have tried to insert the dynamic fields in the table using JS, but they don't generate at the desired position.
Here the code i have written
var table = document.getElementById("myTable");
for(var i = 0; i < val ; i++){
// val is the number of td's needed
var td1 = document.getElementById('td1'); // get id of tb3
var text = document.createTextNode("some text");
td1.appendChild(text);
table.appendChild(td1);
var newField = document.createElement('input');
newField.setAttribute('type', 'text');
var newTd = document.createElement('td');
newTd.appendChild(newField);
var newTr = document.createElement('tr');
newTr.appendChild(newTd);
table.appendChild(newTr);
}
The above code generates the textboxes and the label "Some text", but not at the desired position. Can anyone please suggest how to go about solving this.
[edited]
$('<td>new cell</td>').insertAfter('table tr td:nth-child(3)')
[previous answer]
You could always do it the dirty way...
$('<tr><td>one</td><td>two</td><td>three</td></tr>').insertAfter('table tr:nth-child(3)')
I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});
Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);
Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !
Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?
You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});
I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.
my goal is to make a javascript that i will run using my browser (on someone elses site, not mine) that will take a number from thar site and wait some time depending on the number on the site before clicking a button.
the number is kind of hard to find: in this site there is a table in this table there is a table cell, i got the ID from the cell (for now lets call it "tCell") inside this cell there is another table this does not have an ID, in this table there is a row (once again no ID) in this row there is two cells, and the number is the only content of this cell.
now how do i go from that cell i have an ID on to the content i want?
(how to find the content of a cell then go to the right row of the table among this content)
i guess i will have to use something like this:
var something = document.getElementById('tCell');
and then what...
var something = document.getElementById('tCell');
var table = something.firstChild;
var tbody = table.firstChild;
var row = tbody.firstChild;
var firstTd = row.firstChild;
var secondTd = firstTd.nextSibling;
var textNode = secondTd.firstChild;
var textNodeValue = textNode.nodeValue;
document.getElementById('tCell').getElementsByTagName("table")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML
Will provide you with the number, in string format.