使用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

為每一行指定一個唯一的類名。 也給你的桌子一個：

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 2

如果我正確地讀了這個，你正在尋找這樣一個元素的內部文本（下面， 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。 在這里與此代碼交互。

Answer 3

label html標簽就是標簽。 它沒有像textarea或select標簽這樣的value屬性。 這就是為什么你無法從中獲得價值的原因。