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
}

请参阅CodePen 上 frederik (@frederik84) 的 Pen My project。

Answer 1

您可以将inserted columns 保存在array 中，以便以后轻松定位它们。

我在table 中添加了width 和一些基本示例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) 添加到代码中，并将函数myFunction2() 中的dd.setAttribute("onchange", "GetSport(this)"); 更改为dd.setAttribute("onchange", "GetSport(this.id)");，因此select element 通过id 而不是@ 987654345@.

我添加了一个示例变量imageSRC 和一个if-else 以根据selected value 生成different image paths。您可以在这里使用不同的方法，例如使用array 来存储paths，或者可以调用图片，例如soccer5135616.jpg basket894237582.jpg 等。