Javascript 为什么getElementById（）不标识表id

您好，我正在尝试获取表的id并计算表中的行数。 我用了这个密码

var table =document.getElementById("test");
var i = table.rows.length;

当我使用window.onload时，这对我不起作用。这是我的工作职责

window.onload = function() {
var table =document.getElementById("test");
var i = table.rows.length;

}

现在我需要在另一个函数中使用这个

I

变量。如何使此

i

变量成为全局变量。我的代码有问题吗？ 有人能帮我编码吗？ 编辑01

<table id="test">
    <thead>
        <tr>
            <td style="width:80px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/employee.svg"></td>
            <td style="width:35px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/start_time.svg"></td>
            <td style="width:35px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/id.svg"></td>
            <td style="width:145px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Description.svg"></td>
            <td style="width:45px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Type.svg"></td>
            <td style="width:45px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/qty_prch.svg"></td>
            <td style="width:45px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/qty_used.svg"></td>
            <td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Price.svg"></td>
            <td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/discount.svg"></td>
            <td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Tax.svg"></td>
            <td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Total_01.svg"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="employee[]" value="" style="width:80px;" />
            </td>
            <td>
                <input type="text" name="start_time[]" value="" style="width:35px;" />
            </td>
            <td>
                <input type="text" name="pid[]" onChange="get_values(this.value)" value="" style="width:35px;" />
            </td>
            <td>
                <input type="text" name="description[]" id="description1" value="" style="width:145px;" />
            </td>
            <td>
                <input type="text" name="type[]" id="type1" style="width:45px;" />
            </td>
            <td>
                <input type="text" name="qty_prch[]" id="qty_prch1" style="width:45px;" />
            </td>
            <td>
                <input type="text" name="qty_used[]" id="qty_used1" style="width:45px;" />
            </td>
            <td>
                <input type="text" name="price[]" id="price1" style="width:70px;" />
            </td>
            <td>
                <input type="text" name="discount[]" id="discount1" style="width:70px;" />
            </td>
            <td>
                <input type="text" name="tax[]" id="tax1" style="width:70px;" />
            </td>
            <td>
                <input type="text" name="total[]" id="total1" style="width:70px;" />
            </td>

        </tr>
    </tbody>
</table>

---

您可以将变量的范围声明为全局

var i = null;
window.onload = function() {
  var table =document.getElementById("test");
  i = table.rows.length;
}

---

您可以将变量的范围声明为全局

var i = null;
window.onload = function() {
  var table =document.getElementById("test");
  i = table.rows.length;
}

---

是否有任何东西阻止您在

onload

闭包中使用此其他函数

window.onload = function() {

    var table = document.getElementById("test"),
        i = table.rows.length,

        doStuff = function () {
            // has access to i
        },

        doMoreStuff = function () {
            // also has access to i
        },

        get_values = function () {
            // also has access to i
        };

    document.getElementsByName("pid[]")[0].addEventListener("change", get_values);
}

---

编辑：您可以从HTML中删除

onChange

属性，并在JavaScript中添加事件处理程序是否有任何东西阻止您在

onload

闭包中使用此其他函数

window.onload = function() {

    var table = document.getElementById("test"),
        i = table.rows.length,

        doStuff = function () {
            // has access to i
        },

        doMoreStuff = function () {
            // also has access to i
        },

        get_values = function () {
            // also has access to i
        };

    document.getElementsByName("pid[]")[0].addEventListener("change", get_values);
}

---

编辑：您可以从HTML中删除

onChange

属性，并在JavaScript中添加事件处理程序

我会稍微更改设置…：）

将所有编号的ID更改为未编号的类（也在

displayResult

功能中）

更改

get_values（）

的签名以接受一个附加参数—更改行的索引

更改ajax调用的成功处理程序以使用新布局

我使用“pin”将单击的行索引“固定”到此ajax请求（成功处理程序）

---

现在，您可以根据需要添加任意多的行，而不必乱动编号的ID:）

我会稍微更改设置…：）

将所有编号的ID更改为未编号的类（也在

displayResult

功能中）

更改

get_values（）

的签名以接受一个附加参数—更改行的索引

更改ajax调用的成功处理程序以使用新布局

我使用“pin”将单击的行索引“固定”到此ajax请求（成功处理程序）

---

---

现在，您可以添加任意数量的行，而不必乱动编号的ID:）

使用全局变量不是一个好的做法。你也能显示你的html吗？是的。。这不是一个好习惯。。请不要全球航班。。请将其作为变量传递给需要的函数。是否有其他方法来执行此操作？我需要获取我的表行数并在函数中使用它为什么需要编号的id？使用该id，我需要向控制器传递一个值，该值只在我知道正确的行时发送json响应，我可以将json响应放在正确的行中使用全局变量不是一个好的做法。你也能显示你的html吗？是的。。这不是一个好习惯。。请不要全球航班。。请将其作为变量传递给需要的函数。是否有其他方法来执行此操作？我需要得到我的表行数，并在我的函数中使用它为什么需要编号的id？使用该id，我需要将一个值传递给我的控制器，该控制器只在我知道正确的行时才发送json响应，我可以将json响应放在正确的行中亲爱的@Milind，我们试图让用户知道一些事实（在本例中不使用全局）请确保您没有使用这些代码进行应答，当两个函数具有不同的上下文时，用户无法实现这一点。另一种解决方案是获取表并再次查找行。与将上下文定义为全局上下文相比，这绝对不是一个好方法。哦。。即使使用不同的上下文，您也可以传递变量。@AkshayKhandelwal:是的，但op不是从onload方法调用该方法。我也没有说这是不可避免的。我说在这方面比其他方法不可行case@Anu：需要加载或准备的原因是确保在加载/准备dom时执行代码。代码的第一部分不起作用的原因是，当使用`document.getElementById（“test”）`获取该对象时，元素不存在。亲爱的@Milind，我们试图让用户了解一些事实（在本例中，不使用Globals）请确保您没有使用这些代码进行应答，当两个函数具有不同的上下文时，用户无法实现这一点。另一种解决方案是获取表并再次查找行。与将上下文定义为全局上下文相比，这绝对不是一个好方法。哦。。即使使用不同的上下文，您也可以传递变量。@AkshayKhandelwal:是的，但op不是从onload方法调用该方法。我也没有说这是不可避免的。我说在这方面比其他方法不可行case@Anu：需要加载或准备的原因是确保在加载/准备dom时执行代码。代码的第一部分不起作用的原因是，当使用`document.getElementById（“test”）`获取该对象时，元素不存在。当我在window.onload中有一个函数onchange=“get_values（）”时，它不起作用：（@Anu你也能显示代码吗？在你的问题中，我看不出你需要get_值（）？当我在窗口中有一个函数onchange=“get_值（）”时，我会立即发布。onload它不起作用。：（@Anu你也能显示代码吗？我看不出在你的问题中你需要get_值（）我现在就发帖子，很高兴听你解释。我现在就试用：）@Anu我很高兴听到你这么说，并从中得到乐趣；）我可以用一个下拉框而不是第一个文本框吗？“表格”下拉列表？@Andreasure。你有没有遇到任何问题，或者问这个问题的原因是什么？非常高兴你的解释。我现在将试用：）@Anu我很高兴听到这一点，并享受实验的乐趣；）我可以用下拉框代替第一个文本框吗？“表格”下拉列表？@Andreasure。你有没有遇到任何问题，或者问这个问题的原因是什么？

function displayResult() {
    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><input type="text" name="employee[]" value="" style="width:80px;"/></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}

$(function() {
    $('#test').on('change', 'input[name="pid[]"]', function() {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(this.value, indexOfTheChangedRow);
    });
});

function get_values(val, rowIndex) {
    //...
}

$.ajax({
    url: baseurl + 'admin/billing/getdetails',
    type: 'post',
    data: {
        val: val
    },
    success: function (indexOfTheChangedRow, response) {
        if (response != "") {
            var json = jQuery.parseJSON(response),
                rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");

            // add the changed row as the context to restrict the search for the classes to this one row only
            $('.description', rowToUpdate).val(json.description);
            $('.type', rowToUpdate).val(json.type);
            $('.qty_used', rowToUpdate).val(json.cost);
        }
    }.bind(window, rowIndex),
    error: function (response) {
        alert("error");
    }
});