javascript - Create text box on click - Stack Overflow

admin管理员组

文章数量:1355555

Initially when the page loads the table will be displayed normally but when I click on the edit label it should make the first name value as text box to make it editable. I will enter the value and hit enter it will submit the form. I am really confused how to achieve this.

This is the sample table I have, I couldn't go beyond this.

<label id="edit" style="cursor:pointer; color:blue;">edit</label>

<table>
    <tr><td>First Name: </td>
        <td>John</td>
    </tr>
    <tr><td>Last Name: </td>
        <td>Wright</td>
    </tr>
</table>

jsfiddle

​

Initially when the page loads the table will be displayed normally but when I click on the edit label it should make the first name value as text box to make it editable. I will enter the value and hit enter it will submit the form. I am really confused how to achieve this.

This is the sample table I have, I couldn't go beyond this.

<label id="edit" style="cursor:pointer; color:blue;">edit</label>

<table>
    <tr><td>First Name: </td>
        <td>John</td>
    </tr>
    <tr><td>Last Name: </td>
        <td>Wright</td>
    </tr>
</table>

jsfiddle

​

• javascript
• jquery
• html-table
• textbox

Share Improve this question Follow edited Jul 30, 2017 at 9:48 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 4, 2013 at 18:02 user525146user525146 4,0081616 gold badges6262 silver badges104104 bronze badges 1

• I tried to add <SCRIPT> $('#edit').on("click", function() { $('<input type="text" />').attr({id: 'firstName' });alert("jwsd");}); </SCRIPT> in the td element but didn't understand how to attach it to the table – user525146 Commented Jan 4, 2013 at 18:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Don't plicate the things. Just add another <td> tag wit textbox and make it hidden. Then add some jsvascript which binds to click on label, hides <td> with static text and shows <td> with textbox. BTW you do not need label here, <span> is enough.

$('#edit').click(function() {
    var $table = $('table');
    if ($table.find('input').length) return;
    $table.find('td:nth-child(2)').html(function(i, v) {
        return '<input value=' + v + '>';
    })
})

$('table').on('blur', 'input', function() {
    $('table input').replaceWith(function() {
        return this.value;
    })
})

http://jsfiddle/cnuDh/

check out the following link

How To Create TextBox Dynamically using Javascript and Read Control Value In Code Behind

You can do this using contentEditable support from HTML5 and javascript keyPress event . Please try this link http://jsfiddle/rdRWC/8/ .

HTML

<div id="edit" style="border:1px solid #ccc" contenteditable="true" onkeypress="submitForm(event,this)">edit</div>

JS

   function submitForm(e , t){
    var keyPressed = e.which;
if(e.which == 13){  //Pressed Enter Key
      alert("Do your Form Submittion Here");
   }

}

Instead of creating a textbox when the user clicks, you should have the text box hidden using the CSS

display: none

then, when the user clicks, just call:

$('#textboxid').show();

The reason why I discourage creating a textbox dynamically is because creating HTML is more difficult, and harder to maintain than just showing and hiding a textbox.

本文标签： javascriptCreate text box on clickStack Overflow