基於添加自定義字段的總結

以下為添加自定義字段，設置動態添加表格行，刪除表格行的實例。

主要功能如下：

• 添加行
• 刪除行
• 選擇當前字段名稱
• 設置當前字段名稱可編輯狀態

圖示為實現的演示圖：

 

html:

 

   <table class="table table-hidden">
        <thead>
        <tr>
            <th colspan="3"><a id="addRow" class="btn btn-info">添加一行</a></th>
        </tr>
        <tr>
            <th>字段名稱</th>
            <th>字段值</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="optionContainer">

        </tbody>
    </table>

js:

   function File1(e){
//        console.log(e)
        var name = e.id;
//        alert(name)
        var value=name.substring(6,7)
//        alert(value)
        if (e.value == '0') {
            $("#"+name).css('display', 'none');
            $("#"+name).siblings('input').attr('type', 'text');
            $("#"+name).siblings('input').attr('name', 'key_text_'+value);
        }else {
            alert(e.value)
        }
    }
    function Field2(e){
        var name = e.id;
        $("#"+name).siblings('select').css('display', 'block');
        $("#"+name).attr('type', 'hidden');
    }
    var rowCount = 0;
    $("#addRow").click(function () {
        //Field1(rowCount);
        rowCount++;
        var newRow = '<tr >' +
                '<td><select id="select' + rowCount + '"  class="form-control FieldSelect">' +
                '<option value="1">QQ</option>' +
                '<option value="2">電話</option>' +
                '<option value="3">地址</option>' +
                '<option value="0">編輯</option></select>' +
                '<input id="input' + rowCount + '" type="hidden" name="key'+rowCount+'" class="form-control Fieldtxt" value="QQ" size="10" ondblclick="javascript:return Field2(this)"/> ' +
                '<td> <input class="form-control"  placeholder="輸入字段值" name="content'+rowCount+'" type="text"> </td> ' +
                '<td> <span class="delRow btn btn-danger" onclick="$(this).parent().parent().remove();">刪除</span> </td> ' +
                '</tr>';
        $('#optionContainer').append(newRow);
    });

以上實例在獨立的文件中尚可實現，在開發過程中難免會遇到問題。

把代碼放進了項目中會顯示 

Field()方法未定義的情況

就考慮了一種方案，在選擇實現調用函數，並不寫在動態標簽中。

以下為解決方案：

var rowCount = 0;
$("#addRow").click(function () {
    //Field1(rowCount);
    rowCount++;
    var newRow = '<tr >' +
        '<td>' +
        '<select id="select' + rowCount + '" name="key_select_'+rowCount+'"  class="form-control FieldSelect">' +
        '<option value="1">QQ</option>' +
        '<option value="2">電話</option>' +
        '<option value="3">地址</option>' +
        '<option value="0">編輯</option>' +
        '</select>' +
        '<input id="input' + rowCount + '" type="hidden" name="key'+rowCount+'" class="form-control Fieldtxt" value="QQ" size="10" disabled="disabled"/> ' +
        '<td> <input class="form-control"  placeholder="輸入字段值" name="content'+rowCount+'" type="text"> </td> ' +
        '<td> <span class="delRow btn btn-danger"  onclick="$(this).parent().parent().remove();" >刪除</span> </td> ' +
        '</tr>';
    $('#optionContainer').append(newRow);
    $('#select' + rowCount).change(function () {
        File1(this)
    });
    $('#input' + rowCount).dblclick(function () {
        Field2(this)
    })
});
var File1=function(e){
    //console.log(e);
    //獲取id
    var name = e.id;
    //獲取id在第幾行
    var value=name.substring(6,7);
    //alert(value);
    //判斷值是否為編輯
    if (e.value == '0') {
        $("#"+name).attr("disabled","disabled");
        $("#"+name).css('display', 'none');
        $("#"+name).siblings('input').attr('type', 'text');
        //input 賦值name字段為key_text_**
        $("#"+name).siblings('input').removeAttr('disabled');
        $("#"+name).siblings('input').attr('name', 'key_text_'+value);
    }else {
        //select選中的值
        $("#"+name).attr('name','key_select_'+value)
    }
};
var Field2=function(e){
    var name = e.id;
    $("#"+name).siblings('select').removeAttr('disabled');
    $("#"+name).siblings('select').css('display', 'block');
    $("#"+name).attr('disabled', 'disabled');
    $("#"+name).attr('type', 'hidden');
};

 以上為實現效果，當設置字段名稱為輸入框時，可雙擊返回選擇下拉框來選擇實現主要功能。