CSS, JavaScript style dynamic table

Question

Some help would be much appreciated. It's too much information to sink in for a new developer here

I am trying to make a dynamic table created like this:

function myFunction2() {
    var img = new Image();
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    for (i = 0; i < 12; i++) {
    row.insertCell(i);
     }
    //Add Txt
    row.insertCell(1).innerHTML = "insert";
    //Add Images
    var Sport = document.createElement("IMG");
    Sport.setAttribute("src", "Images/ball.png");
    Sport.setAttribute("div", "Sport");
    row.insertCell(0).appendChild(Sport);


    //Add drop-down list
    var dd = document.createElement("select");
    dd.name = "SportSelector";
    dd.id = "id" + document.getElementById('Table1').rows.length;
    dd.options[dd.length] = new Option("Soccer", "value1");
    dd.options[dd.length] = new Option("Basket", "value2");
    dd.options[dd.length] = new Option("Hockey", "value3");
    dd.setAttribute("onchange", "GetSport(this)");
    row.insertCell(1).appendChild(dd);
    //Done
}

So far so good, But right about now I am stuck trying to resize the table and I have no clue How to do this. For now I am trying to adjust Col(0) which should only contain an icon.

I have tried to give it class name "Sport" and in CSS have this:

 Sport {
    width: 20 px;
    margin-right: 30%;
    border: 1px solid #000;
 }

But this does not work. Any pointer to what I need to do would be great ?

Edit:

Ok so I went with the suggestion from Ivan86 , I have a couple of questions?

Looks like your edit broke another part of my code

function GetSport(val) {
    var x = val.id;
    var x = x.replace("id", "");
    var table =  document.getElementById("Table1")
    table.rows[x - 1].cells[0].innerHTML = "<img src='Images/ball.png'/>";
    //alert("The input value has changed. The new value is: " + val.id);
}

This code was supposed to also change the img file based on the selection in the drop-down. Any suggestion to how to fix ?

Also this part of your suggestion I did not add:

<table id="Table1">
<tr>
    <td colspan="12">OLD ROW</td>
</tr>
</table>

<br/>
<input type="button" onclick="myFunction2()" value="add a new row" />

And the txt "insert" was not supposed to be any part of the code, I updated to this:

function myFunction2()
{
var img = new Image();
var table = document.getElementById("Table1");
var row = table.insertRow(table.length);
// make a cell array
var cells = [];

for (i = 0; i < 13; i++)
{
  // add the cell to the table and to the cell array
  cells.push(row.insertCell(i));
}
//Add Txt

//Add Images
var Sport = document.createElement("IMG");
Sport.setAttribute("src", "Images/ball.png");
Sport.setAttribute("height", "20px");
Sport.setAttribute("width", "20px");
cells[0].appendChild(Sport);
// to add class
cells[0].classList.add('Sport');
// to add CSS to the first cell
cells[0].style.width = '15px';
// create margin-right effect
cells[1].style.padding = '0 0 0 0px';


//Add drop-down list
var dd = document.createElement("select");
dd.name = "SportSelector";
dd.id = "id" + document.getElementById('Table1').rows.length;
dd.options[dd.length] = new Option("Soccer", "value1");
dd.options[dd.length] = new Option("Basket", "value2");
dd.options[dd.length] = new Option("Hockey", "value3");
dd.setAttribute("onchange", "GetSport(this)");
cells[1].appendChild(dd);
//Done
}

See the Pen My project by frederik (@frederik84) on CodePen.

Your add image stuff is making this <img src="Images/ball.png" div="Sport"></img> is that intentional? — Andrew Bone
– Andrew Bone, Commented Jan 19, 2018 at 15:53
It was not my intention to add the class to the img but rather the cell — Frederik 84
– Frederik 84, Commented Jan 19, 2018 at 17:35

Ivan86 · Accepted Answer · 2018-01-19 22:00:52Z

1

You can save the inserted columns in an array so you can easily target them later.

I added a width to the table and some basic example CSS.

I also didn't use the class Sport for the cell styling, but I did add the class sport to the columnif you need it that way.

Here is the code:

Note: margins don't work on table cells, you would need to simply change the cell width or possibly use padding-right. But your best approach in my opinion is to set padding-left on the second column.

function myFunction2()
{
    var img = new Image();
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    // make a cell array
    var cells = [];
    
    for (i = 0; i < 12; i++)
    {
      // add the cell to the table and to the cell array
      cells.push(row.insertCell(i));
    }
    //Add Txt

    //Add Images
    var Sport = document.createElement("IMG");
    Sport.setAttribute("src", "https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/256/Model.png");
    Sport.setAttribute("height", "20px");
    Sport.setAttribute("width", "20px");
    cells[0].appendChild(Sport);
    // to add class
    cells[0].classList.add('Sport');
    // to add CSS to the first cell
    cells[0].style.width = '20px';
    cells[0].style.border= '1px solid #09f';
    // create margin-right effect
    cells[1].style.padding = '0 0 0 20px';


    //Add drop-down list
    var dd = document.createElement("select");
    dd.name = "SportSelector";
    dd.id = "id" + document.getElementById('Table1').rows.length;
    dd.options[dd.length] = new Option("Soccer", "soccer");
    dd.options[dd.length] = new Option("Basket", "basket");
    dd.options[dd.length] = new Option("Hockey", "hockey");
    dd.setAttribute("onchange", "GetSport(this.id)");
    cells[1].appendChild(dd);
    //Done
}

function GetSport(thisID)
{
  var table =  document.getElementById("Table1")
  var imageSRC = '';
  
  var elmnt = document.getElementById(thisID);
  // get currently selected option value
  var str = elmnt.options[elmnt.selectedIndex].value;
  
  // if else to set the image src
  if(str == 'soccer') { imageSRC = 'https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/256/Model.png'; }
  else if(str == 'basket') { imageSRC = 'https://dsfrc4icyn4oa.cloudfront.net/wp-content/uploads/2015/08/07134130/Approve-Sample-Hexa-Icon-250.png'; }
  else { imageSRC = 'http://nexticon.net/media/samples/check.png'; }
  
  // extract only the row number
  var x = thisID.replace("id", "");

  // throw in the variable with the dynamic image path
  table.rows[x - 1].cells[0].innerHTML = '<img src="' + imageSRC + '" width="20px" height="20px" />';
  //alert("The input value has changed. The new value is: " + val.id);
}

#Table1
{
  position:relative;
  margin:0 auto;
  width:80%;
}

<table id="Table1">
<tr>
    <td colspan="12">OLD ROW</td>
</tr>
</table>

<br/>
<input type="button" onclick="myFunction2()" value="add a new row" />

EDIT: I added the function GetSport(thisID) to the code and changed dd.setAttribute("onchange", "GetSport(this)"); to dd.setAttribute("onchange", "GetSport(this.id)"); in function myFunction2(), so the select element passes an id instead of this.

I added an example variable imageSRC and an if-else to make different image paths based on the selected value. You can use different approaches here like using an array to store the paths, or the pictures could be called for example soccer5135616.jpg basket894237582.jpg, etc.

edited Jan 19, 2018 at 22:00

answered Jan 19, 2018 at 16:37

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Frederik 84 Over a year ago

I think this did the trick will need to do some mre testing as I encountered some error(with my code) Thanks alot for help and comments in the code , will be off much help for a newbie. Ill comeback in a while for more comments .. cheers

Frederik 84 Over a year ago

OK so Ive tested it a little , so I updated forst post to include something ., Hope you dont mind

Ivan86 Over a year ago

@Frederik84 I edited to include your function, also I added a couple lines of code to make the image change based on selected value. The edit is described at the bottom, where you click to run the snippet. Is this what you wanted? Oh, and the button and table are just there so we can test in different scenarios.

Frederik 84 Over a year ago

Thanks alot buddy you are a life saver for sure , This was exactly what I was after. I spent 16 hours yesterday trying to make this . I dont know anything about java scripts so it will take some time to get the hang of this. I especially appreciates you comments to your code. I did see you your: If-then statements, in vba coding one could use "select case" as an alternative to this , is that not supported in JS ? Also I will need some time to test your edit but this looks great. frederik

Frederik 84 Over a year ago

Ok so Im testing this not, the GetSport function is much better now ;) I dont understand how the old img gets deleted, where does that happen? Ive tested your if then statements and they does not return "Soccer", or "Bakset", They return Value1,Value2, Value3 I tried to change the code to reflect this but for some reeason it did not work. hmmmm

|

Collectives™ on Stack Overflow

CSS, JavaScript style dynamic table

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related