一些帮助将不胜感激。对于新开发人员来说,这里的信息太多了
我正在尝试创建一个这样创建的动态表:
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 .
最佳答案
您可以保存 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等。
关于javascript - CSS、JavaScript风格的动态表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48344687/