Question

您好我正在尝试获取表格的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>

我需要在以下javascript中使用该变量i

 function displayResult()
        {


            document.getElementById("test").insertRow(-1).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[]" onChange="get_values(this.value)" style="width:35px;"/></td><td><input type="text" name="description[]" id="description[x]" value="" style="width:145px;"/></td><td><input type="text" id="type[x]" value="" style="width:45px;"/></td><td><input type="text" id="qty_used[x]" 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 get_values(val)
{

    $.ajax({
         url: baseurl+'admin/billing/getdetails',
         type: 'post',
         data : {val:val},
         success: function (response) {    
            if(response!="")
            {
                var json=jQuery.parseJSON(response);
                $('#description1').val(json.description);
                $('#type1').val(json.type); 
                $('#qty_used1').val(json.cost);                             
            }
         },
         error: function(response){
            alert("error");
         }
    });
}

Answer 1

是否还有什么阻止你在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中添加事件处理程序

Answer 2

我会略微改变设置...：）

将所有编号的ID更改为未编号的类（也在displayResult函数中）

id="description1" --> class="description"
id="type1" --> class="type"
...

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

从新插入的行中删除“onChange”属性，而不是使用event delegation在表上使用“全局”更改处理程序 - （更改处理程序中使用的方法：.closest()，{{3 }}）

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

更改get_values()的签名以接受其他参数 - 已更改行的索引

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

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

$.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");
    }
});

我正在使用.index()将点击的行索引“固定”到此ajax请求（成功处理程序）。

现在您可以根据需要添加任意数量的行，您不必乱用编号的ID：）

Answer 3

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

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

为什么表ID不是由getElementById（）标识的

3 个答案: