Question

我有两个功能 - 一个采用特定格式的网址（例如＆＃34; test.com？action = query＆amp; max_results = 20＆＃34;）并将其分解为动态生成的文本框以进行编辑。另一个将它与任何编辑一起重新组合在一起。通过单击按钮调用这两个函数。

第二个功能无法找到动态生成的文本框的ID - 它们会以＆＃34; null＆＃34;的形式返回。如何让函数识别页面加载后创建的ID？

代码：

    <script>

    function Split()
    {
        //Get table body for insert
        var table = document.getElementById("ValueTableBody");

        //Clear table of rows
        table.innerHTML = '';

        //Grab URL
        var URLquery = document.getElementById("oldquery").value;

        //Split on ? to isolate query
        var querysplit = oldquery.split("?");

        //Store main url
        var mainURL = document.getElementById('mainURL');
        mainURL.value=querysplit[0];

        //Split on & to isolate variables
        var splitagain = querysplit[1].split("&");             

        var i = 0;

        //Loop on number of variables in query
        for(i = 0; i < splitagain.length; i++){
            //Split on = to isolate variables and values
            var splitthird = splitagain[i].split("=");

            //Insert new row into table
            var row = table.insertRow(i);

            row.insertCell(0).innerHTML = '<input type="text" id="query' + i + '"/>';
            row.insertCell(1).innerHTML = '<input size="50" type="text" id="queryvalue' + i + '"/>';

            //Insert variable and value into respective inputs.
            var split1 = document.getElementById('query' + i);
            split1.value=splitthird[0];

            var split2 = document.getElementById('queryvalue' + i);
            split2.value=splitthird[1];
        }

    }

    function Unsplit()
    {
        var mainURL = document.getElementById('mainURL').value;
        var completequery = [];
        var URLarray = [];

        var rowCount = document.getElementById('ValueTableBody').rows.length; 

        for(i = 0; i <= rowCount; i++){

            //Get variable of current row
            var value1 = document.getElementById('query' + i).value;

            //Get value of current row
            var value2 = document.getElementById('queryvalue' + i).value;

            if (value1) {
                if (value2) {

                    //If both have value, then push into array
                    valueArray = [];

                    valueArray.push(value1);

                    valueArray.push(value2);

                    //Merge into one to push into next array                   
                    var newvalue = valueArray.join("=");

                    URLarray.push(newvalue);
                }
            }
        }

        //Join all sections of the query together
        mergearray = URLarray.join("&");

        //Push mainURL
        completequery.push(mainURL);

        //Push completed query
        completequery.push(mergearray);

        //Join the query together to make complete new URL
        mergearray2 = completequery.join("?");

        //Display new URL
        var newquery = document.getElementById('newquery');
        newquery.value=mergearray2;

        //Output new URL to iframe
        document.getElementById('webservicedisplay').src = mergearray2;

    }
</script>

HTML：

<div style="float:left;">

<h1>Webservice Tester</h1>

<p><label style="font-weight:bold; display:inline-block; vertical-align:top;">Old Webservice Call:</label> <textarea cols="60" rows="4" id="oldquery"></textarea></p>

<input type="submit" name="button" id="splitbutton" onclick="Split()" value="Split!" /> <br><br>

<p><label style="font-weight:bold;">URL:</label> <input type="text" size="50" id="mainURL"></input></p><br>

<table id="ValueTable">
    <thead>
        <th>Variable</th>
        <th>Value</th>
    </thead>
    <tbody id="ValueTableBody">
    </tbody>
</table>

<br>

<p><input type="submit" name="button" id="unsplit" onclick="Unsplit()" value="Unsplit!" /></p> <br><br>

<p><label style="font-weight:bold; vertical-align:top;">New Webservice Call:</label> <textarea cols="60" rows="4" id="newquery"></textarea></p>

</div>

<div style="float:left; padding-left:20px;">

<p><label style="font-weight:bold;">Output:</label></p><br>

<iframe height="450" width="500" id="webservicedisplay" src="">

</iframe>

Answer 1

这是由作者修复的，因为'问题实际上是具有“＆lt; =”条件的循环 - 它正在寻找另一个不存在的表行。'

我建议以不同的方式编写JS：

        row.insertCell(0).innerHTML = '<input type="text" id="query' + i + '" value="' + splitthird[0] + '"/>';
        row.insertCell(1).innerHTML = '<input size="50" type="text" id="queryvalue' + i + '" value="' + splitthird[1] + '"/>';

并删除：

        //Insert variable and value into respective inputs.
        var split1 = document.getElementById('query' + i);
        split1.value=splitthird[0];

        var split2 = document.getElementById('queryvalue' + i);
        split2.value=splitthird[1];

无法找到动态生成的文本框

1 个答案: