0

如何查找表单中的所有自定义元素并将其转换为具有相同值的输入？这是示例代码：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>

我需要转换为输入Ф.И.О。和Выбранная норма за месяц，但要将此值放入输入。

4

3 回答 3

0

我看到你已经给id了td你想要变成可编辑的。

  1. td使用id“nameEditable”全选
  2. 对于其中的每一个：
  3. 缓存文本
  4. 创建一个input
  5. 将缓存的文本分配给inputsval
  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. 你可以通过使用函数index的来做到这一点。each

于 2014-11-15T15:17:39.213 回答
0

根据您的 jsFiddle，它是您的输入之一的示例

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

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

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

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

一般来说是

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

如果你想用输入替换所有th有类的，请使用下面的代码editable

 $( "th.editable" ).each( function() {
     $(this).html('<input value="'+$(this).text()+'" />')
 });
于 2014-11-15T15:12:09.297 回答
0

我会使用 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>

于 2014-11-15T15:26:26.697 回答