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

ドキュメントにこのマーカーを持つ複数の要素があり、最終的に次のような結果になるため、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 に答える
0

あなたのjsFiddleによると、あなたの入力の1つの例です

要素を置き換えるために使用する必要がありますreplaceWith。htmlinnerHtmlは要素の を変更するだけです。

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

id編集可能にしtdたい に既に を与えているようです。

  1. 「nameEditable」tdですべて選択id
  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. index関数のを使用してそれを行うことができますeach。

于 2014-11-15T15:17:39.213 に答える