Question

我已经在我的项目中使用excel几年了。我终于决定把它转移到一个html项目中。它有点糟糕，因为我需要学习有关JS，CSS和HTML的一切，可能还有更多。而且我的excel项目在这一点上非常先进。

但是我必须从头开始并按照我的学习添加内容。最后我觉得值得。

经过多个小时的试验和错误，我已经能够创建这个简单的代码：

function myFunction2() {
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    for (i = 0; i < 10; i++) {
        row.insertCell(i);
    }
    row.insertCell(1).innerHTML = "NEW CELL1";

}

这是删除功能，是正确的措辞，因为我认为数字行为奇怪

function myDeleteFunction() {
    var x = document.getElementById('Table1').rows.length;
    var x = (+x - +1);
    if (x >= 1) {
        document.getElementById("Table1").deleteRow(x);
    }
}

这基本上将一个新行插入到我的表中，但是在cells(0,3,4,5,6,7,10)我需要一个下拉列表我将如何添加这个？

非常感谢任何帮助。

Answer 1

在HTML世界中，下拉列表最近的类比可能是select元素;一个简单的例子是（在myFunction2的末尾）：

row.insertCell(0).innerHTML = '<select><option>opt A</option><option>opt B</option></select>';

您可能希望使用DOM API（以保存一些解析并防止问题直接创建HTML） - 例如，请参阅this SO question了解如何执行此操作。

Answer 2

大家好，谢谢你们的回复。我实际上在等待时找到了答案，不确定我的方式是否最好：

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 drop-down list
   var dd = document.createElement("select");
   dd.name = "SportSelector";
   dd.id = "id";
   dd.options[dd.length] = new Option("Soccer", "value");
   dd.options[dd.length] = new Option("Basket", "value");
   dd.options[dd.length] = new Option("Hockey", "value");
   row.insertCell(0).appendChild(dd);
    //Done
}

我需要研究这个。看起来我的代码有点长。但当然我解决了一个问题而且还得到了10个以上:) lol

我不确定在问题解决后是否有礼貌要求提出跟进问题。

但是我觉得我的下一个问题与第一个问题密切相关。因为我的代码最终会增加大量的这些下拉菜单。我需要某种方式来找到＆＃34;我的下一个js函数再次下拉。

如何添加一个能够捕获＆＃34;的代码？哪个下拉我编辑并返回弹出消息或其他东西？

frederik

Answer 3

要添加行，您可以执行以下操作

function myFunction2() {
    var table = document.getElementById("Table1");
    var row = table.insertRow(table.length);
    var dropDownHtml = "<select><option>A</option><option>B</option><option>C</option></select>";
    var cell;
    for (i = 0; i <= 10; i++) {
        cell = row.insertCell(i);
        if (i == 0 || i == 10 || (i >= 3 && i <= 7)) {
            cell.innerHTML = dropDownHtml;
        }
    }
}

仅供参考：您可以在开始使用索引0时添加/删除行，最后使用-1 / insertRow()

的索引作为deleteRow()

您可以按如下方式修改删除行功能

function myDeleteFunction() {
    var x = document.getElementById('Table1').rows.length;
    x = (x - 1); //do you want to not allow header to be removed or what ?
    if (x >= 1) {
        document.getElementById("Table1").deleteRow(x);
    }
}

Javascript，Dynamic Table将选项框插入表中

3 个答案: