You can modify an element from Button to Input Text with jQuery

Question

You can modify an element from Button to Input Text with jQuery

Navigation

#1 by (1 votes)

1

You can modify the element, of the DOM with jQuery. That is, declare it as a Button and then with jQuery convert it to text. or when I have a table with records do not double click on a td it becomes an input text where I can modify it? I was proving with attr or prop , I do not know if I'm wrong or esque you can not

$('button').dblclick(function() {
    editar();
});

function editar(){
  $('button').attr("type", 'input');
  console.log('Estas adentro');
}

 $('#tabla tbody tr > td').dblclick(function() {
    $(this).css('color', 'red');
    //$(elemento).prop("button");
    //$(this).html("Hola");
    console.log($(this).html());
    editar();
    //alert();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toca me dos veces seguido</button><br>
<table id="tabla" border=1>
<tr>MI NOMBRE COMPLETO</tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
</table>

javascript jquery

asked by Ivan More Flores 19.07.2017 в 21:43

source

1 answer

Problem with input in python How can I get the date of a datepicker using angular 2?

score 1 · Accepted Answer

What you want to do can only be done when the button is a input element, otherwise it will remain a button, another possible solution is to remove the button and add a input with the characteristics that the removed button had

Your modified code, the button is a input and not a button

now for the tables you just have to add the attribute contentEditable and it would no longer be necessary to call the method editar()

$('input[type="button"]').dblclick(function() {
    editar();
});

function editar(){
  $('input[type="button"]').attr("type", 'text');
  console.log('Estas adentro');
}

 $('#tabla tbody tr > td').dblclick(function() {
    $(this).css('color', 'red').attr('contentEditable',true);
    //$(elemento).prop("button");
    //$(this).html("Hola");
    console.log($(this).html());
    //editar();
    //alert();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Toca me dos veces seguido"><br>
<table id="tabla" border=1>
<tr>MI NOMBRE COMPLETO</tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
<tr></tr>
<td>Ivan</td>
<td>Joel</td>
<td>More</td>
<td>Flores</td>
</table>