antidot

February 20, 2017

Hmmm. Sometimes stepping away helps...

Just tried the .children[0].value . Works fine!

i guess getElementsByTagName would work as well ...

February 20, 2017

Hi,

i'm struggeling a bit while i'm trying to acces the value of inputfields inside tablecells.

I don't have ids available and hve to check row by row or jus specified rows.

function test(){
	var tableBody = document.getElementById("testCalc");
	var tableBodyRows = tableBody.rows.length;
	console.log(tableBody);
	console.log(tableBody.rows[0].cells[4].?);
}

.value

.innerHTML.value

.textContent

all won't work.

Any suggestions?

December 10, 2016

Thx. I am already taking a closer look on how to define regExp. It's beginning to be fun :-)

December 5, 2016

I will check out tomorrow. Time to sleep. Thx for fast reply

December 5, 2016

Hi,

i'm reading back and forward but not really coming t a solution.

I would like to grab the content of an input field (not inside a form) i am using for date, but just as string.

the needed output format is always DD/MM/YYYY

so said :

12.02.16 or 2016

12.2.16 or 2016

12-02-16

and so on should all result in 12/02/2016

if there would be a timestamp behind it just needs to be cutted off.

I really thought this would be easier :-) But it isn't

Maybe somebody could point out a good article or solution for me.

Thx.

I'm really struggling with the regular expressions :-)

  var txt='31-12/2016';

      var re1='(\\d)';	// Any Single Digit 1
      var re2='(\\d)';	// Any Single Digit 2
      var re3='(.)';	// Any Single Character 3
      var re4='(\\d)';	// Any Single Digit 1
      var re5='(\\d)';	// Any Single Digit 2
      var re6='(.)';	// Any Single Character 4
      var re7='((??:[1]{1}\\d{1}\\d{1}\\d{1})|(?:[2]{1}\\d{3})))(?![\\d])';	// Year 1

      var p = new RegExp(re1+re2+re3+re4+re5+re6+re7,["i"]);
      var m = p.exec(txt);
      if (m !== null)
      {
          var c1=m[1];
          var c2=m[2];
          var c3="/";
          var d1=m[4];
          var d2=m[5];
          var c4="/";
          var year1=m[7];
          alert(c1+c2+c3+d1+d2+c4+year1+"\n");
      }
else
{
alert("Please check format");
}

November 16, 2016

Well, did some changes. working better already.

function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];
    var x = document.getElementById("TableB").rows.length;
    var y = document.getElementById("TableB").rows[0].childElementCount;
    var z = document.getElementById("TableB").rows[0].cells[2].innerText;
    var origTable = document.getElementById("TableB");
    alert("x=" + x + " y=" + y + " z=" + z);

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // creating all cells
    for (var i = 0; i < x; i++) {
        // creates a table row
        var row = document.createElement("tr");
        for (var j = 2; j < y; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cellText = document.createTextNode("cell in row " + i + ", column " + j);
            var cellTextHeader = document.createTextNode(origTable.rows[0].cells[j].innerText);
            console.log(cellTextHeader);
            var id4Table = document.createTextNode("tbr" + i + j);
            //if row is first row of the table create a <th>    
            if (i < 1) {
                var cell = document.createElement("th");
                cell.appendChild(cellTextHeader);
                //row.appendChild(cell);

            } else {
                cell = document.createElement("td");
            cell.appendChild(cellText);
            }
            cell.setAttribute("ID", id4Table.nodeValue);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
    tbl.setAttribute("class", "tableTest");
}

November 16, 2016

Hi, im a little bit struggling here.

What I am trying to do is read the content from a Table by reading the number of rows and cells,(later on only selected rows by checkbox)

then display the data in a ´generated Table (where i have to add cells with inputfields)

So now my question is:

How do i have to write the code so the first row will be created with <th> instead of <td> ?

How to add input fields to the cells ?

(actually they all could be input fields, just filled out with the data from the table i read from and blank fields for the added or so on.)

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];
    var x = document.getElementById("TableB").rows.length;
    var y = document.getElementById("TableB").rows[0].childElementCount;
    var z = document.getElementById("TableB").rows[1].cells[3].innerText;
    alert("x="+x +" y="+y+" z="+z);
 
  // creates a <table> element and a <tbody> element
  var tbl     = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // creating all cells
  for (var i = 0; i < x; i++) {
    // creates a table row
    var row = document.createElement("tr");
 alert("ROW"+row);
    for (var j = 0; j < y; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
    if (row.tabIndex[0]){
      var cell = document.createElement("th");
        cell.appendChild(cellText);
        row.appendChild(cell);
        
    }
    else{
      cell = document.createElement("td");}
      cell.appendChild(cellText);
      row.appendChild(cell);
        
    }
 
    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
 
  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute("border", "2");
    tbl.setAttribute("class", "tableTest");
}

November 16, 2016

hmm. didn't work on my console... whatever. i'll figure it out some day :-)

October 4, 2016

// four variables are created and assigned in a single go, 
// separated by commas
var myObj = new Object(),
    str = "myString",
    rand = Math.random(),
    obj = new Object();

myObj.type              = "Dot syntax";
myObj["date created"]   = "String with space";
myObj[str]              = "String value";
myObj[rand]             = "Random Number";
myObj[obj]              = "Object";
myObj[""]               = "Even an empty string";

console.log(myObj);

function showProps(obj, objName) {
  var result = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
      result += objName + "." + i + " = " + obj[i] + "\n";
    }
  }
  return result;
}

Ok. That's a code example from mdn: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

now I am wondering if using the showProps function, how to access

1. the "date created" property (or any prop with spaces)

2. the "rand" property (or any prop with number)

myObj["date created"] shows correctly.

myObj["object Object"] how to access ?

myObj[rand] works because the key name is stored in that var...

when using the the function passing "date created" won't work. Or any other spaced string. It shows undefined or throws error of mmissing "]" even its present....

So i wonder how to acces all the properties correctly. Is it even possible tow access them somehow by index as in an array? Because the property name for "rand" of course results in a random number...

September 21, 2016

Use classList to see if class exist, add or remove, it also shows fallback for crappy IE and its older crappy versions http://www.w3schools.com/jsref/prop_element_classlist.asp

@dsonesuk

thx alot for your help. Sometimes it's just hard to find the correct function, method or whatever...

if i would want to have the var spieler not as global, would it be better to construct the whole thing as an object so i have the methods present on any object or is there another way? (I'm sure there is)

kr

ps

if i get it right, your example isn't with fallback?

and is the IF statement necesary in this case? I understand it that if the class is present on the

actual element it gets removed and added again. So the work for removing on all other elemts is done by the ELSE part.

September 19, 2016

Thx alot for all the help.
I am quite busy so i don`t have as much time as i would like to...

So far i am going with this solution:

function ReplaceContentInContainer(content, id) {
 
    var container = content.innerHTML;
    this.className = 'smallCard.current';
    document.getElementById(id).innerHTML = container;
       // console.log("CONSOLE TEST");
    }
{
var spieler = document.getElementsByClassName("smallCard");
for (var i = 0; i < spieler.length; i++) {
    spieler[i].addEventListener("click", (function(){ReplaceContentInContainer(this, "fc")}));
 
    }
}

while changing of the class for the clicked element isn`t aproblem, it appears to be much harder to change the class of another element...

All i want to do here is to set focus and remove the focus class from the element that had it before. So very common but i'm doing something wrong. I tried it with a for in loop, but as i read on mdn it seems to cause the problems i experience when iterrating over an array.

Would be great if anybody could help me out here too.

I removed the not working code already from my snippet... only the change of the classe is still there.

September 2, 2016

So you have elements that you click on which have content that you want to replace. That is a fairly vague description. Where does this new content come from? Is it unique for each clicked item or all the same?

I want to grab the content from an element i am clicking on to be displayed in another element.

Have to dig through your example...

appreciate the help

September 2, 2016

The console.log(this.innerHTML); won't work because what does does 'this' refers to, 'spieler.innerHTML' will be undefined because it will referring to a listing and index ref it has no knowledge of, as it is separated outside from the for loop that created it.

Create anonymous function and add function ref to that, and since the click element is the innerHTML you wish to target use 'this'

Thx for the help!

So you are saying, i have to create an anonymous function if i want to execute another Function and passing arguments?

usually my function looks like this:

 
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}

so when calling like so, it should work?

spieler[i].addEventListener("click", function() {
                    ReplaceContentInContainer("anyID", this.innerHTML);
}

I'm reading on mdn about addEventLister, but i still don't get it. Personally the "HOW" is very important to me.

August 29, 2016

Hi, i really don´t know how to solve this, or why it isn't working...

first i try to grab all elements havung a specified class. no matter if it's 1 or 1000 elements.

After that all of those elements will have assigned an eventListener which then calls the function to replace the content from the clicked element in another specified element. (by taking and replacing inner html).

Usually i had the targetcontainer as 2nd argument in the eventlistener, but that didn't work at all.

See for yourself what happens.

Funny that when using the displayDate function everything works fine...

var spieler = document.getElementsByClassName("smallCard");
var i;
for (i = 0; i < spieler.length; i++) {
    console.log(this.innerHTML);
    spieler[i].addEventListener("click", ReplaceContentInContainer(spieler[i].innerHTML));
    }


function ReplaceContentInContainer(content) {
var container = document.getElementById("fc");
container.innerHTML = content;
}

    

function displayDate() {
    document.getElementById("fc").innerHTML = Date();
}

But like this it's working:

{
var spieler = document.getElementsByClassName("smallCard");
var i;
for (i = 0; i < spieler.length; i++) {
    spieler[i].addEventListener("click", ReplaceContentInContainer);
    console.log(spieler[i]);
    }
}


function ReplaceContentInContainer() {
document.getElementById("fc").innerHTML = this.innerHTML;
}

But i don't understand why !

Maybe someone could help me ou by explaining this to me.

Sign In

antidot

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by antidot

Read valu from input field inside <td>

Read valu from input field inside <td>

how to validate and format string using RegExp?

how to validate and format string using RegExp?

how to validate and format string using RegExp?

Creating DOM Table - HowTo first row <TH> ?

Creating DOM Table - HowTo first row <TH> ?

Question about accessing objects...

Question about accessing objects...

update content via eventlistener

update content via eventlistener

update content via eventlistener

update content via eventlistener

update content via eventlistener

Browse

Activity