如何在表单中查找自定义元素并将其填充到输入中

我会使用 nameEditable 作为类，因为您在文档中有多个带有此标记的元素，最终得到如下结果：

$(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>

它是你的一个输入的例子，根据你的jsFiddle

你应该使用 replaceWith 来替换 elemnt，html 只是更改元素的innerHtml

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

如果您只想替换th使用中的内容

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

一般来说，它是

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

如果您希望将所有具有类editable的th替换为输入，请使用以下代码

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

我看到您已经对要变为可编辑td进行了id。

1. 选择所有带有"名称可编辑"id td
2. 对于其中的每一个：
3. 缓存文本
4. 创建input
5. 将缓存的文本分配给input val
6. 清除td文本
7. 将创建的input追加到td

如果你给你的按钮一个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);
    });
});

演示小提琴：http://jsfiddle.net/jsL28xno/5/

更新：

如果要在th中搜索特定文本，然后使用该文本将该列转换为可编辑，则：

1. 搜索包含文本的th
2. 存储该th的索引
3. 使用nth-child选择器选择具有存储索引的所有td（+1 实际上）
4. 插入input如上面的代码片段中所述

.

$("#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);        
    });
}

演示小提琴2：http://jsfiddle.net/5rdq5s43/1/

注意1：您可以直接使用列号，而不是搜索文本。

注2：建议提供您添加的每个input，一个唯一的id。您可以使用each函数的index来执行此操作。