js中设置表格和文本框的长度-CSDN博客

<div id="customSettings" class="wizard-card" data-cardname="services">
    <h3 i18n="text:key_phy_customConfig">自定义设置</h3>                                      
    <a id="phy_addCustomConfig" role="button" class="btn"> <i class="icon-plus"></i> <span i18n="text:key_add_customConfig">添加设置</span></a><i class="icon-question-sign"></i> 
    <table style="width: 100%">
        <thead>
            <tr >
                <td style="width:30%" i18n="text:customConfig_name">名称</td>      
                <td style="width:60%" i18n="text:customConfig_value">内容</td>                   
            </tr>
        </thead>
        <tbody id="customConfig_list">
            <tr class="customConfig_input customConfig_template">
                   <td style="width:30%"><input class="customConfig_name" style="border-style: hidden;width:100%" type="text" /></td>
                   <td style="width:60%"><input class="customConfig_value" style="border-style: hidden;width:100%" type="text"/></td>    
                <td  class="removeCustomConfig_input" style="display: none;width: 10%"><a role="button" class="btn" style="width:55%"><i class="icon-remove"></i> </a></td>
            </tr>
        </tbody>
    </table>                
</div>

$("#phy_addCustomConfig")
    .click(
    function (event) {
        var customConfigArr = [];
        var tr = "<tr class='customConfig_input customConfig_template'>";       
        var td1 = "<td style='width:30%'><input class='customConfig_name' style='border-style: hidden;width:100%' type='text'  value=''></td>";
        var td2 = "<td style='width:60%'><input class='customConfig_value' style='border-style: hidden;width:100%' type='text'  value='' ></td>";              
        var td3 = "<td  class='removeCustomConfig_input' style='display: none;width: 10%'><a role='button' class='btn' style='width:55%'><i class='icon-remove'></i> </a></td>"
        customConfigArr.push(tr);
        customConfigArr.push(td1);
        customConfigArr.push(td2);
        customConfigArr.push(td3); 
        customConfigArr.push("</tr>");
        var customConfig = $(customConfigArr.join(""));
        $(customConfig).removeClass("customConfig_template");
        $(customConfig).addClass("CustomConfig_added");

        $(customConfig).find(".removeCustomConfig_input").show();
        $(customConfig).find(".customConfig_name").val("");
        $(customConfig).find(".customConfig_value").val("");
        
        $(customConfig).find(".removeCustomConfig_input").click(function () {
            $(customConfig).remove();
        });
        $("#customConfig_list").append(customConfig);     
        $(customConfig).find(".customConfig_value").blur(function(){
            $(this).parent().find(".error-popover").hide();
       });
    });