In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > ActiveX > ADO > properties > dataFld

dataFld property

Browser support:

Specifies or returns which field of a given data source should be bound to the specified object.

In HTML, only Internet Explorer supports table creation dynamically from XML. If you want to implement similar functionality in other browsers, you need to use JavaScript. For further details, see the page for the XMLHttpRequest object.

Syntax:

object.dataFld;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: dataFld

Possible values:

String that sets or retrieves the name of the data field.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the dataFld attribute:

<xml id="movies">
<?xml version="1.0"?>
    <movies>
        <movie>
            <name>&lt;b&gt;Clark Kent&lt;/b&gt;</name>
            <jobtitle>Superman</jobtitle>
            <born>1966</born>
        </movie>
        <movie>
            <name>&lt;b&gt;Lois Lane&lt;/b&gt;</name>
            <jobtitle>Reporter</jobtitle>
            <born>1964</born>
        </movie>
    </movies>
</xml>

<table width="100%" cellpadding="0px" cellspacing="2px" border="1px" datasrc="#movies" datapagesize="2" >
    <thead>
        <tr>
            <th>Name</th>
            <th>Jobtitle</th>
            <th>Born</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span datafld="name" dataformatas="html"></span></td>
            <td><span datafld="jobtitle"></span></td>
            <td><span datafld="born"></span></td>
        </tr>
    </tbody>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the dataFld property with XML data island:

<head>
    <script type="text/javascript">
        function RotateDataFields () {
            var dataTable = document.getElementById ("dataTable");

            if ('dataSrc' in dataTable) {
                for (var i = 0; i < dataTable.tBodies.length; i++) {
                    var spans = dataTable.tBodies[i].getElementsByTagName ("span");
                    var save = spans[0].dataFld;
                    spans[0].dataFld = spans[1].dataFld;
                    spans[1].dataFld = spans[2].dataFld;
                    spans[2].dataFld = save;
                }
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <xml id="movies">
    <?xml version="1.0"?>
        <movies>
            <movie>
                <name>Clark Kent</name>
                <jobtitle>Superman</jobtitle>
                <born>1966</born>
            </movie>
            <movie>
                <name>Lois Lane</name>
                <jobtitle>Reporter</jobtitle>
                <born>1964</born>
            </movie>
        </movies>
    </xml>

    <table id="dataTable" width="100%" cellpadding="0px" cellspacing="2px" border="1px" datasrc="#movies" datapagesize="2">
        <thead>
            <tr>
                <th>Name</th>
                <th>Jobtitle</th>
                <th>Born</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span datafld="name" dataformatas="html"></span></td>
                <td><span datafld="jobtitle"></span></td>
                <td><span datafld="born"></span></td>
            </tr>
        </tbody>
    </table>

    <button onclick="RotateDataFields ();">Rotate data fields</button>
</body>