javascript - CSS、JavaScript风格的动态表格

Question

一些帮助将不胜感激。对于新开发人员来说，这里的信息太多了

我正在尝试创建一个这样创建的动态表:

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
}

到目前为止一切顺利，但现在我无法尝试调整表格大小，而且我不知道如何执行此操作。现在我正在尝试调整应该只包含一个图标的 Col(0)。

我试着给它起类名“Sport”，在 CSS 中有这个:

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

但这行不通。任何关于我需要做什么的指示都会很棒？

编辑:

好的，我接受了 Ivan86 的建议，我有几个问题？

看起来你的编辑破坏了我代码的另一部分

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);
}

此代码还应该根据下拉列表中的选择更改 img 文件。关于如何修复的任何建议？

另外这部分你的建议我没有补充:

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

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

并且 txt“插入”不应该是代码的任何部分，我更新为:

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
}

看笔 My project通过弗雷德里克( @frederik84)在 CodePen .

Answer 1

您可以保存 inserted columns在array这样您以后就可以轻松定位他们。

我添加了一个 width到 table和一些基本示例 CSS .

我也没有使用 class Sport对于单元格样式，但我确实添加了 class sport到 column如果你需要那样的话。

代码如下:

注意: margins不要在 table cells 上工作，您只需更改 cell width或者可能使用 padding-right .但我认为最好的方法是设置 padding-left在第二列。

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" />

编辑: 我添加了函数 GetSport(thisID)到代码并更改dd.setAttribute("onchange", "GetSport(this)");至 dd.setAttribute("onchange", "GetSport(this.id)");在函数中 myFunction2() , 所以 select element通过 id而不是 this .

我添加了一个示例变量 imageSRC和一个 if-else制作different image paths基于 selected value .您可以在此处使用不同的方法，例如使用 array存储 paths ，或者图片可以调用例如soccer5135616.jpg basket894237582.jpg等。