使用Javascript从HTML表中抓取字段

时间:2012-01-04 19:41:09

标签: javascript c# html asp.net html-table

我正在构建一个从存储过程动态填充的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);
    }

我设置了警报以检查它是否抓取标签值,但它对标签没有显示任何内容。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:1)

为每一行指定一个唯一的类名。也给你的桌子一个:

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

答案 1 :(得分:1)

如果我读得正确,你正在寻找这样一个元素的内部文本(下面是locationNum),而不是标签:

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

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

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.

答案 2 :(得分:0)

label html标签只是一个标签。它没有像valuetextarea标记的select属性。这就是你无法从中获得价值的原因。