Question

我有这样的表格： -

    <form action="">
    <table border="0">
        <td colspan="2" class="instruction">Select your desired option to search.</td>
    </table>
      <table>
        <tr>
          <td><label>
            <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
            Customer Code</label></td>
          <td><label>
            <input type="radio" name="search_option" value="company" id="search_option_1">
            Customer Company</label></td>
          <td><label>
            <input type="radio" name="search_option" value="name" id="search_option_2">
            Customer Name</label></td>
          <td><label>
            <input type="radio" name="search_option" value="email" id="search_option_3">
            Customer Email</label></td>
        </tr>
      </table>
      <input class="Button" name="search_submit" type="submit" value="Search">
    </form>

现在在最后</table>之后，我想在选择任何选项按钮时创建一个文本框。意味着，没有页面加载动态。

Answer 1

仅限Javascript：

// Create the element
var input = document.createElement("input");
input.type = 'text';
input.name = 'inputName';
input.value = 'some value';
input.size = 10;
input.maxLength = 10;
input.className = 'someClass';

// append the element
var btn = document.getElementsByName('search_submit')[0]; // get the button to insert the element before it;
btn.parentElement.insertBefore(input, btn);

与jQuery相同的过程：

$('input[name="search_submit"]').before('<input type="text" name="inputName" size="10" maxlength="10" class="someClass" />');

jsfiddle here

以下是点击无线电的jsfiddle，只需检查一次。

Answer 2

使用标准javascript，你必须在之后创建另一个div框，然后使用你想要的输入元素html设置它的innerHtml。

使用jQuery，您可以使用.after或.append等特殊功能来执行类似的任务。

Answer 3

我还建议你使用jQuery（http://jquery.com/），但你也可以浏览这篇文章，它可以帮助你理解这个问题。http://www.javascriptkit.com/javatutors/dom2.shtml

Answer 4

            <html>
            <body>
            <table border=2>
            <tr>
            <td>PASSWORD</td>
            <td><input type="radio" name="radGroup" id="rad1" onchange="showElement('1')">
            DEFAULT PASSWORD
            <input type="radio" name="radGroup" id="rad1" onchange="showElement('2')">
            NEW PWD</td></tr>
            <tr><td></td><td>
            <span id="elementNum1" style="display:none;cisibility:hidden;">
            <input type="text" id="txt1" value="jct123" /> your default 
            </span>
            <span id="elementNum2" style="display:none;cisibility:hidden;">
            <input type="text" id="txt2" value="" />conform
            </span>
            </td>
            </tr>
            <script type="text/javascript">
            function showElement(iElementToShow) 
            {       
            var oPage;
            var bContinueLooping=true;
            var iElement=1;
            while (bContinueLooping) 
            {
                try 
                {
                    oPage=document.getElementById('elementNum'+iElement);
                    oPage.style.display='none';
                    oPage.style.visibility='hidden';
                    iElement++;
                } 
                catch(oError) 
                {
                    bContinueLooping=false;
                }
            }
            oPage=document.getElementById('elementNum'+iElementToShow);
            oPage.style.visibility='visible';
            oPage.style.display='inline';
            }
            </script>
            </table>
            </body>
            </html>

如何在没有页面加载的情况下动态创建文本框

4 个答案: