使用 Javascript 从 HTML 表中获取字段

Question

我正在构建一个从存储过程动态填充的 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 页面中的表中获取所需数据并将其发送到代码隐藏以进行操作的代码。

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

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

Answer 1

如果我没看错，您正在寻找这样一个元素的内部文本（下面，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。 Interact with this code here.

Answer 2

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

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 ...
})

Answer 3

label html 标签就是这样一个标签。它没有value 属性，如textarea 或select 标签。这就是为什么您无法从中获得价值的原因。