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“insert”不应该是代码的任何部分，我更新到这个：

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上查看frederik（@frederik84）上的笔CodePen。

Answer 1

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

我在width和一些基本示例table中添加了CSS。

我也没有使用class Sport进行单元格样式设置，但我确实将class sport添加到column中你需要那样。

以下是代码：

注意： margins无法使用table cells，您只需更改cell width或可能使用padding-right 。但我认为你最好的办法是在第二栏设置padding-left。

＆＃13;

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

＆＃13;

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

＆＃13;

<table id="Table1">
<tr>
    <td colspan="12">OLD ROW</td>
</tr>
</table>

<br/>
<input type="button" onclick="myFunction2()" value="add a new row" />

＆＃13;

编辑：我在代码中添加了GetSport(thisID)函数，并在函数dd.setAttribute("onchange", "GetSport(this)");中将dd.setAttribute("onchange", "GetSport(this.id)");更改为myFunction2()，因此{{1传递select element代替id。

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

Answer 2

也许你错过了这个点？

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

另外，要添加一个必须使用的类：

Sport.classList.add('Sport');

CSS，JavaScript风格动态表

2 个答案: