我正在尝试创建一个动态表。我想获得等于用户在框中输入的行数

时间:2019-06-14 19:38:00

标签: javascript

我的问题是我无法为输入或值设置ID。因为输入在JavaScript内部,所以我怎么称呼它?并且我希望每次输入特定数字时输入的值都会改变。

我希望看到第一列的值发生变化,因此,如果用户输入数字4,则意味着有4盏灯。

function createTable() {
    var a;
    a = document.getElementById('number1').value;
    if (a == 2 || a == 1 || a < 0) {
        alert("Please enter a positive number greater than 2");
    } else {
        var rows = "<th>Light </th><th>Rating(W)</th><th>Span-from prev.light-(m)</th><th>Voltage Drop (v)</th><th>Voltage Drop( % ) </th>";
        for (var i = 0; i < a; i++) {
            rows += "<tr><td><input type='number' id=frt  name='" + "Light".concat(i + 1) + "' id=li></td><td><input type='number' value=250 name='" + "Rating(W)".concat(i + 1) + "'><td><input type='number' value=40 name='" + "Span-from prev.light-(m)".concat(i + 1) + "'></td><td><input type='number' name='" + "Voltage Drop (v)".concat(i + 1) + "'></td><td id='amt'><input type='number' id='sum' onkeyup='myfunction(this.value);' name = '" + "Voltage Drop(%)".concat(i + 1) + "'> </td></tr >";
        }
    }
    document.getElementById("table").innerHTML = rows;
}
<!DOCTYPE html>
<html>
<body>
    <table cellpadding="1" cellspacing="1" border="1" id="table" style="font: 20px solid bold;font-weight: bold; background-color:#707B7C;color:black;"></table>
    <input type="number" name="Numbers of Lights" id="number1" oninput="createTable()" value="3" style="width:40px; position: absolute; 
      top:300px; left:800px;">
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果将行更改为此

 rows += "<tr><td><input value='" + (i  + 1) + "'  type='number' id=frt  name='" + "Light".concat(i + 1) + "' id=li></td><td><input type='number' value=250 name='" + "Rating(W)".concat(i + 1) + "'><td><input type='number' value=40 name='" + "Span-from prev.light-(m)".concat(i + 1) + "'></td><td><input type='number' name='" + "Voltage Drop (v)".concat(i + 1) + "'></td><td id='amt'><input type='number' id='sum' onkeyup='myfunction(this.value);' name = '" + "Voltage Drop(%)".concat(i + 1) + "'> </td></tr >";

您可以在第一列中将迭代作为值获取。