How to find custom elements in form and replece them to inputs

Question

How to find all custom elements in form and convert it to inputs with same value? Here is the example code: http://jsfiddle.net/irider89/jsL28xno/4/

$(function() {
    $(".triggeredit-card-list").click(function() {
        var UsrName = $('.card-list-table').find('#nameEditable').html();
        console.log(UsrName);
        $('.card-list-tabe').find('#nameEditable').html('<input type="text" class="editable-table" name="editname" id="edittext" value="'+ UsrName +'" />');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="flip-scroll" class="table-responsive card-list-table">
    <table class="table table-custom">
        <thead>
            <tr>
                <th>Номер карты</th>
                <th>Ф.И.О.</th>
                <th>Дата выдачи</th>
                <th>Состояние</th>
                <th>Сумма на карте</th>
                <th>Категория</th>
                <th>Суточная норма</th>
                <th>Месячная норма</th>
                <th>Выбранная норма за месяц</th>
                <th>Вес карты</th>
                <th>Комментарий</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5757427</td>
                <td class="" id="nameEditable">Петров Иван Иванович 1</td>
                <td>25.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>Дизель</td>
                <td>123</td>
                <td>26</td>
                <td id="monthValue">1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
            <tr>
                <td>69594894</td>
                <td id="nameEditable">Константинопольский Яков Аристархович</td>
                <td>27.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>123</td>
                <td>123</td>
                <td>25</td>
                <td>1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
            <tr>
                <td>5757427</td>
                <td id="nameEditable">Петров Иван Иванович</td>
                <td>25.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>123</td>
                <td>123</td>
                <td>25</td>
                <td>1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<button class="btn btn-info btn-triggeredit triggeredit-card-list"><i class="glyphicon glyphicon-pencil"></i> Редактировать</button>

I need to convert to input Ф.И.О. and Выбранная норма за месяц, but to put this values to the input.

Answer 1

its an example of one of your inputs, according to your jsFiddle

You should use replaceWith to replace the elemnt, html just changes the innerHtml of the element

$( "th:contains('Ф.И.О.')" ).replaceWith('<input value="Ф.И.О." />')

if you want just replace the content in th use

$( "th:contains('Ф.И.О.')" ).html('<input value="Ф.И.О." />')

In general it is

var itemToFind = 'Ф.И.О.'
$( "th:contains('"+itemToFind+"')" ).html('<input value="'+itemToFind+'" />')

If you want all th which have class editable to be replaced with input use the code below

 $( "th.editable" ).each( function() {
     $(this).html('<input value="'+$(this).text()+'" />')
 });

Answer 2

I see that you already have given an id to the td you want to turn editable.

1. Select all td with id "nameEditable"
2. For each of those:
3. Cache the text
4. Create an input
5. Assign the cached text to the inputs val
6. Clear the td text
7. Append the created input to the td

It would be better if you give your button an id.

$("#btn").on("click", function () {
    $("td#nameEditable").each(function () {
        var txt = $(this).text();
        var $tmpl = $("<input type='text' />");
        $tmpl.val(txt);
        $(this).text('');
        $(this).append($tmpl);
    });
});

Demo Fiddle: http://jsfiddle.net/jsL28xno/5/

Update:

If you want to search for particular text in th and then use that to convert that column to editable, then:

1. Search th containing the text
2. Store the index of that th
3. Use nth-child selector to select all td with the stored index (+1 actually)
4. Insert input as mentioned in the above code snippet

.

$("#btn").on("click", function () {
    editColumn("Ф.И.О.");
    editColumn("Выбранная норма за месяц");
});

function editColumn(whichColumn) {
    var idx = $("table th:contains('" + whichColumn + "')").index() + 1;
    $('table td:nth-child(' + idx + ')').each(function() {
        var txt = $(this).text();
        var $tmpl = $("<input type='text' />");
        $tmpl.val(txt);
        $(this).text('');
        $(this).append($tmpl);        
    });
}

Demo Fiddle 2: http://jsfiddle.net/5rdq5s43/1/

Note 1: Instead of searching for text, you could directly use the column number.

Note 2: It is advisable to provide each input you add, a unique id. You can do that by using the index of the each function.

Answer 3

I would use nameEditable as class because you have multiple element with this marker on document and ended up with something like this:

$(function () {
    $(".triggeredit-card-list").click(function () {
        $('.nameEditable').each(function(index, item){
            var content = $(item).html();
            $(item).replaceWith('<input type="text" class="editable-table" name="editname" id="edittext" value="' + content + '" />');
        })
    });
});

JSFiddle

$(function () {
    $(".triggeredit-card-list").click(function () {
        $('.nameEditable').each(function(index, item){
            var content = $(item).html();
            $(item).replaceWith('<input type="text" class="editable-table" name="editname" id="edittext" value="' + content + '" />');
        })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="flip-scroll" class="table-responsive card-list-table">
    <table class="table table-custom">
        <thead>
            <tr>
                <th>Номер карты</th>
                <th>Ф.И.О.</th>
                <th>Дата выдачи</th>
                <th>Состояние</th>
                <th>Сумма на карте</th>
                <th>Категория</th>
                <th>Суточная норма</th>
                <th>Месячная норма</th>
                <th>Выбранная норма за месяц</th>
                <th>Вес карты</th>
                <th>Комментарий</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5757427</td>
                <td class="nameEditable">Петров Иван Иванович 1</td>
                <td>25.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>Дизель</td>
                <td>123</td>
                <td>26</td>
                <td id="monthValue">1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
            <tr>
                <td>69594894</td>
                <td class="nameEditable">Константинопольский Яков Аристархович</td>
                <td>27.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>123</td>
                <td>123</td>
                <td>25</td>
                <td>1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
            <tr>
                <td>5757427</td>
                <td class="nameEditable">Петров Иван Иванович</td>
                <td>25.12.2013</td>
                <td>Все</td>
                <td>3 300</td>
                <td>123</td>
                <td>123</td>
                <td>25</td>
                <td>1</td>
                <td>2</td>
                <td>Комментарий</td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<button class="btn btn-info btn-triggeredit triggeredit-card-list"><i class="glyphicon glyphicon-pencil"></i> Редактировать</button>