Question

我意识到这个主题已被覆盖过，但我发现我的问题稍微复杂一些。我是JQuery的菜鸟，经过一段时间的考虑，我已经接近我的解决方案，但仍然有点远。

与以前的帖子一样，我试图将HTML表格中的数据转换为XML，然后使用XML数据填充textarea。我已成功获取大部分数据，但是在我的Option Box之后，我没有取得多大成功。

类似文章： Convert HTML table into XML using JavaScript or JQuery
jQuery convert HTML Table to XML

我的代码如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
    <div id="load_get">
    <TABLE id=tblSample style="BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; VISIBILITY: visible" cellSpacing=0>
        <THEAD style="FONT-SIZE: 15px">
            <TR>
                <TH>#</TH>
                <TH>Property<BR>#</TH>
                <TH>Location</TH>
                <TH>Status</TH>
                <TH>Tag<BR>#</TH>
                <TH>Pkg<BR>#</TH>
                <TH>Description</TH>
                <TH>Origin</TH>
                <TH>Emp <br />Assigned</TH>
                <TH style="COLOR: red">Action</TH>
                <TH style="COLOR: red">Comment</TH>
                <TH>Distributor <br />Contact #</TH>
                <TH>Distributor <br /> Contact Name </TH>
                <TH style="FONT-SIZE: 10px"></TH>
            </TR>
        </THEAD>
        <TBODY>
            <TR class=classy1>
                <TD><INPUT id=prop_id_1 readOnly size=1 type=hidden value=prop_id_1 name=prop_id_1>1</TD>
                <TD><INPUT id=property1_1 readOnly size=10 value=1429757></TD>
                <TD><INPUT id=pro_location1_1 readOnly size=8 value="CENTRAL"></TD>
                <TD><INPUT id=pro_status1_1 readOnly size=10 value=RECEIVED readonly></TD>
                <TD><INPUT id=pro_tag1_1 style="WIDTH: 30px" readOnly value=1 readonly></TD>
                <TD><INPUT id=package_num1_1 style="WIDTH: 30px" readOnly value=1></TD>
                <TD><INPUT id=pro_description1_1 readOnly size=40 value="8FT 2X4 SOLID ALUMINUM BAR"></TD>
                <TD><INPUT id=pro_origin1_1 readOnly size=3 value="FL"></TD>
                <TD><INPUT id=pro_assigned1_1 readOnly size=5 value=33821></TD>
                <TD><SELECT id=pro_action1_1><OPTION selected value=None></OPTION><OPTION value=A-Store>A-Store</OPTION><OPTION value=B-Sell>B-Sell</OPTION><OPTION value="C-Return to Vendor">C-Return to Vendor</OPTION><OPTION value="D-Scrap">D-Scrap</OPTION></SELECT></TD>
                <TD><INPUT id=pro_comment1_1 size=15></TD>
                <TD><INPUT id=contact1_1 size=10></TD>
                <TD><INPUT id=contactname1_1 size=10></TD>
                <TD></TD>
            </TR>
            <TR class=classy0>
                <TD><INPUT id=prop_id_2 readOnly size=1 type=hidden value=prop_id_2 name=prop_id_2>2</TD>
                <TD><INPUT id=property1_2 readOnly size=10 value=1422658></TD>
                <TD><INPUT id=pro_location1_2 readOnly size=8 value="CENTRAL"></TD>
                <TD><INPUT id=pro_status1_2 readOnly size=10 value=RECEIVED readonly></TD>
                <TD><INPUT id=pro_tag1_2 style="WIDTH: 30px" readOnly value=2 readonly></TD>
                <TD><INPUT id=package_num1_2 style="WIDTH: 30px" readOnly value=1></TD>
                <TD><INPUT id=pro_description1_2 readOnly size=40 value='8FT 0.5IN DIA ALUMINUM RODS'></TD>
                <TD><INPUT id=pro_origin1_2 readOnly size=3 value="FL"></TD>
                <TD><INPUT id=pro_assigned1_2 readOnly size=5 value=33821></TD>
                <TD><SELECT id=pro_action1_1><OPTION selected value=None></OPTION><OPTION value=A-Store>A-Store</OPTION><OPTION value=B-Sell>B-Sell</OPTION><OPTION value="C-Return to Vendor">C-Return to Vendor</OPTION><OPTION value="D-Scrap">D-Scrap</OPTION></SELECT></TD>
                <TD><INPUT id=pro_comment1_2 size=15></TD>
                <TD><INPUT id=contact1_2 size=10></TD>
                <TD><INPUT id=contactname1_2 size=10></TD>
                <TD></TD>
            </TR>
        </TBODY>
    </TABLE>
</div>
<p>Click the button to activate the jquery function.</p>

<button id="button1">Try it</button>

<p id="demo"></p>

<textarea id="xmlArea" rows="30" cols="60"></textarea>


<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
        $(function () {
            $("#button1").click(function () {
                var xml = '<?xml version="1.0" encoding="utf-8"?>\r\n';
                xml = xml + "<Root><Warehouse>\r\n";

                $("#tblSample tr").each(function () {
                    var cells = $("td", this);
                    if (cells.length > 0) {
                        xml += "<Item Name='" + $(this).closest('tr').find('input').eq(0).val() + "'>\r\n\t";

                        for (var i = 1; i < cells.length; ++i) {

                            //Need to parse out selected item in dropdown box
                            if (i == 9)
                            {
                                xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $("select option:selected", cells.eq(i)).text() + '"/>\r\n\t';
                            }
                            else
                            {
                                xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t';
                            }
                        }

                        xml += "</Item>\r\n";
                    }
                });

                xml = xml + '</Warehouse></Root>';
                //window.alert(xml);
                //cells.eq(i)).text()
                document.getElementById("xmlArea").value = xml;
                //here you can rewrite the xmlstring to a new document
                //or use the hidden control to store the xml text, call the text in code behind.
                //also, you can call ajax to excuet codebehind and sava the xml file

            });
        })

</script>
</body>
</html>

我认为我在

附近遇到了问题

xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t';

因为它正在寻找下一个值

我也试过

for (var i = 1; i < 10; ++i) {
    //Need to parse out selected item in dropdown box
    if (i == 9) {
        xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $("select option:selected", cells.eq(i)).text() + '"/>\r\n\t';
    }
    else {
        xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t';
    }

}
for (var i = 10; i < cells.length; ++i) {
    //Need to parse out selected item in dropdown box
    xml += '<Data Title="' + $("#tblSample").find("th").eq(i).text() + '" Value="' + $(this).closest('tr').find('input').eq(i).val() + '"/>\r\n\t';
}

我正在

<?xml version="1.0" encoding="utf-8"?>
<Root><Warehouse>
    <Item Name='prop_id_1'>
        <Data Title="Property#" Value="1429757"/>
        <Data Title="Location" Value="CENTRAL"/>
        <Data Title="Status" Value="RECEIVED"/>
        <Data Title="Tag#" Value="1"/>
        <Data Title="Pkg#" Value="1"/>
        <Data Title="Description" Value="8FT 2X4 SOLID ALUMINUM BAR"/>
        <Data Title="Origin" Value="FL"/>
        <Data Title="Emp Assigned" Value="33821"/>
        <Data Title="Action" Value="B-Sell"/>
        <Data Title="Comment" Value="555-5555"/>
        <Data Title="Distributor Contact #" Value="metal co"/>
        <Data Title="Distributor  Contact Name " Value="undefined"/>
        <Data Title="" Value="undefined"/>
</Item>
<Item Name='prop_id_2'>
        <Data Title="Property#" Value="1422658"/>
        <Data Title="Location" Value="CENTRAL"/>
        <Data Title="Status" Value="RECEIVED"/>
        <Data Title="Tag#" Value="2"/>
        <Data Title="Pkg#" Value="1"/>
        <Data Title="Description" Value="8FT 0.5IN DIA ALUMINUM RODS"/>
        <Data Title="Origin" Value="FL"/>
        <Data Title="Emp Assigned" Value="33821"/>
        <Data Title="Action" Value="A-Store"/>
        <Data Title="Comment" Value="555-5555"/>
        <Data Title="Distributor Contact #" Value="metalco"/>
        <Data Title="Distributor  Contact Name " Value="undefined"/>
        <Data Title="" Value="undefined"/>
</Item>
</Warehouse></Root>

如您所见，评论中包含电话号码，联系人＃包含姓名，联系人姓名未定义

Answer 1

使用以下内容。我对您发布的小提琴所做的更改是：

增加for循环的迭代次数，以便它可以一直到达最后一个单元格
更改选择器以获取`this`（TR）的`：nth-child`（TD）的子（INPUT），而不是尝试找到第n个输入。需要在nth-child参数中使用i + 1作为：nth-child是一个基于1的数组。
删除了第二个FOR循环

SET Connection = Server.CreateObject("ADODB.Connection")
Connection.Open "Provider = sqloledb;" & _

将HTML表转换为XML

1 个答案: