使用Javascript从HTML表中获取字段

Grabbing a field from an HTML Table with Javascript

本文关键字：获取 字段 HTML Javascript 使用      更新时间：2023-09-26

我正在构建一个从存储过程动态填充的web表单。这是一个带有下拉列表、文本框和一个标签的表。我可以成功地从下拉列表和文本框中获取数据，但无法从标签中获取数据。以下是填充表的数据部分的代码。

        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'><select name='select_" + count + "'><option value='Pending'>Pending</option><option value='Approve'>Approve</option><option value='Deny'>Deny</option></select></td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'><input type='text' name='comments_" + count + "' /></td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + locationNum + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + shipToNum + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + address + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + city + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + state + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + zip + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + soldToName + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + exemptionDescription + "</td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'><label for='select_" + count + "' name='label_" + count + "'>" + exemptionRequestDetailID + "<label></td>");
        sb.Append("<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + reason + "</td>");

下面的代码从aspx页面的表中获取所需的数据，并将其发送到codeehind进行操作。

function SendForm() {
        var count = 0;
        var elLength = form1.elements.length;
        for (i = 0; i < elLength; i++) {
            var type = form1.elements[i].type;
            alert(type);
            if ((type == "select-one") && (form1.elements[i].value != "Pending")) {
                count++
            }
        }
        var data = new Array(count);
        var text = new Array(count);
        var exempID = new Array(count);
        for (i = 0; i < elLength; i++) {
            var type = form1.elements[i].type;
            if ((type == "select-one") && (form1.elements[i].value != "Pending")) {
                data[i] = form1.elements[i].value;
            }
            if ((type == "text") && ((form1.elements[i-1].value == "Approve") || (form1.elements[i-1].value == "Deny"))) {
                text[i] = form1.elements[i].value;
            }
            if ((type == "label") && ((form1.elements[i-2].value == "Approve") || (form1.elements[i-2].value == "Deny"))) {
                alert(form1.elements[i].value);
            }

        }

        PageMethods.SendForm(data, text, OnSucceeded, OnFailed);
    }

我设置了警报来检查它是否正在获取标签值，但它根本没有显示标签的任何信息。如有任何帮助，我们将不胜感激。

如果我读对了，你正在寻找这样一个元素的内部文本（下面是locationNum），而不是标签：

<td style='border-top: 1px solid black; border-left: 1px solid black;'>" + locationNum + "</td>

如果是这种情况，请查看td元素的firstChild.nodeValue。

var table_children = document.getElementsByTagName( 'td' );
var x = 0, len = table_children.length;
for( x = 0; x < len; x += 1 ) {
     var tag_text = table_children[ x ].firstChild.nodeValue;   
     alert( tag_text );
}

不需要jQuery。在此处与此代码交互。

给每一行一个唯一的类名。也给你的桌子一个：

sb.Append("<table class='table1'...
sb.Append("<td class='dataRow row1' ......

然后，您可以使用jQuery:轻松地找到表中的所有元素

$('.table1 td').each(function() {
    var myClass = $(this).class
    selectVal = $(myClass).find('select').val()
    textVal = $(myClass).find('input').val()
    labelVal = $(myClass).find('label').html() 
    ...your other logic ...
})

label html标签就是一个标签。它不像textarea或select标记那样具有value属性。这就是为什么您无法从中获取值。

相关文章：