Hello i try to generate a table with only one column. So my Links get displayed in only one column.
Here is my function:
function createTableForPdfFiles() {
//To Create The Table
var table = document.createElement("table");
table.setAttribute('id', 'pdfTable');
table.setAttribute('class', 'AANTable');
// insert Title Row
var TitleRow = table.insertRow();
var cell = TitleRow.insertCell();
cell.setAttribute('class', 'AANTitleRow');
cell.setAttribute('colSpan', pdfFiles.length + 1);
cell.appendChild(document.createTextNode("Datenblätter"));
//Insert Table Rows
var pdfRow = table.insertRow();
var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
cell.setAttribute('class', 'AANPdfRow');
for (var i = 0; i < pdfFiles.length; i++) {
var cell = pdfRow.insertCell();
var link = document.createElement("a");
link.setAttribute("href", "www.test.at" + pdfFiles[i].Link);
var linktext = document.createTextNode(pdfFiles[i].Link);
link.appendChild(linktext);
cell.appendChild(link);
cell.setAttribute('class', 'AANPdfCell');
}
$("#divTable").append(table);
}
Right now it looks like:
But i want it to look like:
So how i can i make that possibe? I tried to add another Row to the table but the debugger says not supported...... Any help would be really great.
thanks for your Time.
You have to create anew row foer each pdf.
Hae to put this
var pdfRow = table.insertRow();
var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
cell.setAttribute('class', 'AANPdfRow');
Inside the for
take a look at this -> fiddle
Related
I want to create a bookmarklet by using javascript, which can retrieve max length of all text box in the page, and then print a table below the page with all id and max length indicated.
Here is my code, however it did not print anything.
javascript: (function() {
var body =document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
var D = document,
i, f, j, e;
for (i = 0; f = D.forms[i]; ++i)
for (j = 0; e = f[j]; ++j)
if (e.type == "text") S(e);
function S(e) {
var l= document.getElementById(e.id);
var x = document.getElementById(e.maxlength);
var tr=document.createElement('tr');
var td1=document.createElement('td');
var td2=document.createElement('td');
td1.appendChild(document.createTextNode(l));
td2.appendChild(document.createTextNode(x));
tr.appendChild(td1);
tr.appendChild(td2);
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
})
This can actually be done much simpler than you have it.
Working jsfiddle: https://jsfiddle.net/cecu3daf/
You want to grab all of the inputs and run a loop over them. From this you can dynamically create a table and append it to the end of the document.body
var inputs = document.getElementsByTagName("input"); //get all inputs
var appTable = document.createElement("table"); //create a table
var header = appTable.createTHead(); //create the thead for appending rows
for (var i=0; i<inputs.length; i++) { //run a loop over the input elements
var row = header.insertRow(0); //insert a row to the table
var cell = row.insertCell(0); //insert a cell into the row
cell.innerHTML = inputs[i].maxLength; //input data into the cell
var cell = row.insertCell(0);
cell.innerHTML = inputs[i].id;
}
document.body.appendChild(appTable); //append the table to the document
To make it a bookmark, simply place the javascript: before hand. There is no need to encase it in a function. You can if you'd like to.
Can you help me plz. In my code i create elements(div) with table elements in it.
When i put "blue_button" - creates a new div with table in it. The table has 5 td rows. I need to numbering only 1st rows. I mean when i put blue_button twice, the first row in first table in first div - has number 1, the second(i need) must have number 2 (for example).
I "broke my brains". Help plz.
Here is my code:
var unitTableTrTd_1 = [];
var unit = document.createElement('div');
var unitTable = document.createElement('table');
unit.appendChild(unitTable);
var unitTableTr = document.createElement('tr');
unitTable.appendChild(unitTableTr);
var unitTableTrTd_1 = document.createElement('td');
var td_1_p = document.createTextNode("1");
unitTableTrTd_1.appendChild(td_1_p);
unitTableTr.appendChild(unitTableTrTd_1);
var unitTableTrTd_2 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_2);
var unitTableTrTd_3 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_3);
var unitTableTrTd_4 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_4);
var unitTableTrTd_5 = document.createElement('td');
unitTableTr.appendChild(unitTableTrTd_5);
unit.id = "block";
wrapper.appendChild(unit);
Its very simple,
take a global variable table_index ( outside button click's callback )
var table_index = 0;
now on each button click's callback increment the table_index by 1, and use it;
table_index++;
var td_1_p = document.createTextNode( table_index );
I'm working on a script which takes text and places each paragraph in a numbered table cell. I'm running into a problem where each line break is counted as a paragraph by the script, which means my table either has empty cells or is numbered incorrectly.
Here's the working script (minus row numbering):
function formatArticle() {
var doc = DocumentApp.getActiveDocument()
var body = doc.getBody();
// Get the paragraphs
var paras = body.getParagraphs();
// Add a table to fill in with copied content
var addTable = body.appendTable();
for (var i=0;i<paras.length;++i) {
// If the paragraph is text, add a table row and insert the content.
if(i % 2 == 0) {
var tr = addTable.appendTableRow();
var text = paras[i].getText();
// Number the table rows as they're added in a cell to the left.
for(var j=0;j<2;j++) {
if(j == 0) {
var td = tr.appendTableCell(i);
} else {
var td = tr.appendTableCell(text);
}
}
}
// Shrink left column.
addTable.setColumnWidth(0, 65);
// Delete the original text from the document.
paras[i].removeFromParent();
}
}
Here's a demo Google Doc so you can see how text formats without setting a new one up yourself if that helps.
Logic
What you should do is to iterate each paragraph and check if that paragraph contains text. If yes, then add a row and put the text in it, else skip that paragraph and jump to the next one.
Implementation
function formatArticle(){
var doc = DocumentApp.getActiveDocument()
var body = doc.getBody();
// Get the paragraphs
var paras = body.getParagraphs();
var addTable = body.appendTable();
//paragraph index
var pIndex = 0;
for(var i = 0 ; i < paras.length ; i++){
var para = paras[i];
var paraStr = para.editAsText().getText();
// if there is string content in paragraph
if(paraStr.length){
var tr = addTable.appendTableRow();
var td1 = tr.appendTableCell(pIndex);
var td2 = tr.appendTableCell(paraStr);
pIndex ++;
}
para.removeFromParent();
}
// Shrink left column.
addTable.setColumnWidth(0, 65);
}
Here You get the string from paragraph var paraStr = para.editAsText().getText(); and check if the content exists if(paraStr.length) If yes then create a row, insert paragraph index and paragraph's text in it.
Try this: tr.appendTableCell(i/2 +1)
// Number the table rows as they're added in a cell to the left.
for(var j=0;j<2;j++) {
if(j == 0) {
var td = tr.appendTableCell(i/2 +1);
} else {
var td = tr.appendTableCell(text);
}
}
}
I am new to web development and struggling with deleting a dynamically created table.
Below is the JavaScript function to create the table when user clicks a button.
function DrawTable(data){
var oTHead = myTable.createTHead();
var oTFoot = myTable.createTFoot();
var oCaption = myTable.createCaption();
var oRow, oCell;
var i, j;
var heading = new Array();
heading[0] = "AAA";
heading[1] = "BBB";
heading[2] = "CCC";
heading[3] = "DDD";
var tableData = data.split(':');
// Insert a row into the header.
oRow = oTHead.insertRow(-1);
oTHead.setAttribute("bgColor","lightskyblue");
// Insert cells into the header row.
for (i=0; i < heading.length; i++)
{
oCell = oRow.insertCell(-1);
oCell.align = "center";
oCell.style.fontWeight = "bold";
oCell.innerHTML = heading[i];
}
// Insert rows and cells into bodies.
for (i=0; i < tableData.length; i++)
{
var oBody = oTBody0;
oRow = oBody.insertRow(-1);
var splitData = tableData[i].split(',');
for (j=0; j < splitData.length; j++)
{
oCell = oRow.insertCell(-1);
oCell.innerHTML = splitData[j];
}
}
}
The above code works perfectly and draws the table when user clicks on the button.
If user clicks on the button again it will draw the table again.
i.e., it will draw another header and all the rows all over again.
At this point I want to delete the existing header and rows and draw it all new.
I tried many things to delete the existing table, but nothing works.
Is there a way I can make sure that the table is not duplicated again?
UPDATE
The HTML part is:
<table id="myTable">
<tbody ID="oTBody0"></tbody>
</table>
ANOTHER UPDATE
I tried below and it worked.
oTHead.innerHTML = "";
oTBody0.innerHTML = "";
jQuery offers a .empty() function that you can use
$("#myTable").empty();
Or with javascript you can just set the innerHTML to empty
document.getElementById("myTable").innerHTML = "";
Just execute this function before you start trying to add new content to the table.
//$("#myTable").empty();
document.getElementById("myTable").innerHTML = "";
// Insert a row into the header.
oRow = oTHead.insertRow(-1);
oTHead.setAttribute("bgColor","lightskyblue");
// Insert cells into the header row.
for (i=0; i < heading.length; i++) {
oCell = oRow.insertCell(-1);
oCell.align = "center";
oCell.style.fontWeight = "bold";
oCell.innerHTML = heading[i];
}
Since you're using jQuery, just do this: $('#containerIdThatYourTableSitsIn').html('');
That will clear the html of whatever element your table sits in. Then just reload it.
Edit
As the comments have mentioned, .empty() is another option.
http://jsfiddle.net/waH5S/6/
function add_row_retail() {
$(document).ready(function () {
var table = document.getElementById("Retail");
var row = table.insertRow(-1);
var row_id = $('#Retail').val('tr[id]:last');
console.log(row_id);
var cell_init = row.insertCell(-1);
cell_init.innerHTML = "blank";
});
}
I am trying to get the id of the table row(<tr>) before the added row, and then add 1 to this, with proper parseint(...). Then doing the same with the cell (<td>) next, so that every cell has a unique id for each table. I can't seem to find the row's id.
HERE IS THE "CORRECT" CODE FOR MY QUESTION
function add_row_retail() {
var table = document.getElementById("Retail");
// Row id
var row_id = $('#Retail tr:last').attr('id');
var row = table.insertRow(-1);
var next_row_id = "tr_" + (1+parseInt(row_id.match(/\d+/)[0],10));
$(row).attr('id', next_row_id);
for (var i = 0; i < 8; i++) {
var cell_id = $('#Retail td:last').attr('id');
console.log(cell_id);
var next_cell_id = "td_" + (1+parseInt(cell_id.match(/\d+/)[0],10)); console.log(next_cell_id);
var cell = row.insertCell(-1);
$(cell).attr('id', next_cell_id);
$(cell).innerHTML = "blank";
}
}
Rather than $('#Retail').val('tr[id]:last'); I think you want:
var row_id = $('#Retail tr:last').attr('id')
This selector finds the last tr under the #Retail element, and returns its id attribute.
jQuery last selector: http://api.jquery.com/last-selector/
Next problem: IDs cannot start with numbers. Rename your IDs like "tr_1", "tr_2", etc.
Next problem: To extract the numbers from a string:
"tr_123".match(/\d+/)[0]; // returns 123.
Add 1 to it:
var next_id = "tr_" + (1+parseInt("tr_123".match(/\d+/)[0],10));
Then, set your new id.
var row = table.insertRow(-1);
...
$(row).attr('id', next_id);