首先，id 在一個頁面中只能出現一次，是唯一的，class才可以多次出現！

聲明

id 為唯一屬性，即一個 html 檔案中只能出現一個對應的 id，class 可以使用多個;

需求實現

前端部分大到框架，小到功能，都是可以用設計模式來解決的，說穿了，都是可以用 MVC 來解決的，如你的例子：

• C -> 整個 JS 邏輯；

• V -> 單行條目；

• M -> 填充的數據；

你其實可以把這種東西進行閉包封裝，或是做成一個處理類。如：

<p class="clearfix" style="margin-left:200px;">
    <button class="button2" style="border:1px solid #000">添加</button>
    <form class="clearfix" style="float:left;margin-top:100px;">
        <table border="1">
            <thead>
                <tr class="zzz">
                    <th width="240">计算期类型</th>
                    <th width="240">期间</th>
                    <th width="128">征收方式</th>
                </tr>
            </thead>
            <tbody id="zType_all">
            </tbody>
        </table>
    </form>
</p>

繼續完善腳本：

(function($) {
    'use strict';

    /**
     * 组件条目解析
     * 一行即一个组件条目，该构造方法
     * 例：var thisRow = new AppRow();
     * @return {object} 一个 jQuery 对象
     */
    var AppRow = function() {
        return this.rowParse(this.rowDom());
    };

    // HTML 结构
    AppRow.prototype.rowDom = function() {
        var row = '',
            options = AppRow.typeChose,
            optionYears = options[0].types;

        // 计算期类型
        row += '<td><select class="type">';
        row += '<option value="-1">请选择</option>';
        for (var i in options) {
            row += '<option value="' + i + '">' + options[i].name + '</option>';
        }
        row += '</select></td>';

        // 期间
        row += '<td class="types"></td>';

        // 征收方式
        row += '<td><select class="collection">';
        row += '<option value="0">请选择</option>';
        row += '<option value="1">查账征收</option>';
        row += '<option value="2">核定征收</option>';
        row += '</select></td>';

        return '<tr>' + row + '</tr>';
    };

    // 解析行结构，添加事件
    AppRow.prototype.rowParse = function(row) {
        var $row = $(row),
            $typeTime = $row.find('select.type'),
            $typeTypes = $row.find('.types'),
            optionsData = AppRow.typeChose;

        // 计算期类型
        $typeTime.on('change.app', $.proxy(function(e) {
            var val = $typeTime[0].value;
            $typeTypes.children().remove();
            $typeTypes.append(this.selectYears(val));
        }, this));

        return $row;
    };

    // 返回年度表单
    AppRow.prototype.selectYears = function(type) {
        var optionYears = AppRow.typeChose[0].types,
            select = '',
            $select = null;

        // 构建表单
        select += '<select class="year">';
        select += '<option value="-1">请选择</option>';
        for (var i in optionYears) {
            select += '<option value="' + i + '">' + optionYears[i].years + '</option>';
        }
        select += '</select>';

        // 构建成 jQuery 对象
        $select = $(select);

        // 事件绑定
        $select.on({
            // 选择事件
            'change.app': $.proxy(function(e) {
                var val = $select[0].value,
                    $sub = $select.next('.sub');

                if (type <= 0) {
                    // 年终汇算无后续表单
                    return;
                }

                if (val === -1) {
                    // 未选择，则移除后续表单
                    $select.nextAll().remove();
                    return;
                }

                // 创建或或初始化后续表单
                if (!$sub.get(0)) {
                    // 表单不存在则创建
                    $select.after(this.selectSub(type, val));
                }
                $sub.trigger('reset.app');
            }, this),

            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 返回季度或月份表单
    AppRow.prototype.selectSub = function(type, year) {
        var optionData = AppRow.typeChose[type].types[year].zType_time1,
            select = '',
            $select = null;

        if (!optionData) {
            // 无数据
            return;
        }

        // 构建表单
        select += '<select class="sub">';
        select += '<option value="-1">请选择</option>';
        for (var i in optionData) {
            select += '<option value="' + i + '">' + optionData[i] + '</option>';
        }
        select += '</select>';
        $select = $(select);

        // 事件绑定
        $select.on({
            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 联动数据 - zType_chose
    AppRow.typeChose = [{
        "name": "年终汇算",
        "types": [{
            "years": "2015年"
        }, {
            "years": "2016年"
        }]
    }, {
        "name": "预缴-月度",
        "types": [{
            "years": "2015年",
            "zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        }, {
            "years": "2016年",
            "zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        }]
    }, {
        "name": "预缴-季度",
        "types": [{
            "years": "2015年",
            "zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]
        }, {
            "years": "2016年",
            "zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]
        }]
    }];

    AppRow.VERSION = '1.0.0';

    // ===========================================

    // 添加按钮事件绑定
    var $addBtn = $('.button2'),
        $rowList = $('#zType_all');

    // 点击添加
    $addBtn.on('click.app', function(e) {
        // 或直接添加实例
        $rowList.append(new AppRow());
    });

})(jQuery);

解釋

• 建立一個建構方法，用於產生一個具有互動封裝效果的結構 —— 元件；

• 為組件添加一系列方法，並在內部創建邏輯；

• 閉包封裝指僅 (function($){ /*code*/ })(jQuery); 生效；

• $.fn.remove可以保證頁面的資料的安全性，切忌使用 $.fn.hide；

• 還可以生使用 AppRow.prototype.delete() 擴充刪除操作等；

• 如果需要使用name 做資料提交，則需使用name="row[index][name]" 的格式，如：name="row[1]['type']"、 name="row[1]['year']"、name="row[1]['sub']";

最終效果：

在線效果

https://jsfiddle.net/kxjyo7fp...

把遍歷資料的程式碼，放在你點選新增行這個方法的裡面，具體協調如何添加一行遍歷一條，這個還是你自己實現，我沒細看。你現在有點象動態加入的元素，你綁定事件，結果再html寫好的綁定上去了，但是添加的沒綁定上事件一樣

建議直接用 ui 函式庫吧，jquery 的話，可以選 easyui / bootstrap table 吧

事件綁定在頁面渲染完成之後就會綁定成功，之後不會自動綁定，也就是頁面渲染完之後添加的節點是無法綁定的，這裡說的是$('.a').click (...) 這種類似的方式因為第一次編譯的時候會把頁面上class為A的綁定一個事件，如果你JS動態條件幾個class為a的節點那麼之後加的是沒有效果的，因為第一次綁定的時候後新增的節點不存在。
解決方式推薦用on（）這個方法例如$('body').on('click','.a',fun(){}) 這種方式就可以，因為不管什麼時候body這個標籤都會存在所以不會出現節點找不到而無法綁定的情況。
當然 你也可以自己將函數寫在節點上 但是 不推薦這樣寫。

我改寫了一部分產生 DOM 的腳本，用 jQuery 的方式，為了快速，用了一些 ES6 的語法。但尚未完成功能

https://jsfiddle.net/jrhju549/1/

然後在考慮級聯這部分東西的時候，我發現了一個問題(關於數據)：

從數據來看，不管是哪年月繳和季度的可選數據都是一樣的，月是12個月，季是4季度，那麼這些數據其實都是固定的，可以直接寫在HTML 中，這樣產生新行的時候只需要先克隆再進行細節處理就行了，這樣簡單得多。

但是，不排除另一種可能性，就是你每年的可選項都不一樣。例如 2015 是 12 個月，2016 是 8 個月…(當然這種情況的可能性很低)，那這樣的話，就可根據這個數據來動態產生 select。那麼在動態產生 select 之前，就需要透過一個 findXxxx 函數來找出對應的 option 清單所需要使用的資料——這個過程當然就會複雜得多。

就目前的進展來看，主要有幾點說明一下

模組化處理

不要想在一個函數中做所有事情，拆分一下，例如我在程式碼中初步拆分了 createRow 和 createSelect。其中 createSelect 是可以高度重複使用的

// 创建 select，items 是数据 map 是名称映射表
// 如果名称本来就是按 value 和 text 来命名，就不需要映射表
function createSelect(items, map = {}) {
    const value = map.value || "name";
    const text = map.text || "text";
    const $options = items
        .map(t => $("<option>").prop({ value: t[value] }).text(t[text] || ""));
    return $("<select>").append(...$options);
}

// 创建一个 tr，含 td 和初始化的 select
function createRow() {
    var $tr = $("<tr>");
    var $tds = Array.from(Array(3))
        .map(() => $("<td>"));

    createSelect(types).appendTo($tds[0]);

    createSelect([
        { value: "chazhang", text: "查账征收" },
        { value: "heding", text: "核定征收" }
    ]).appendTo($tds[2]);

    return $tr.append(...$tds);
}

先整理資料

因為 DOM 結構是根據資料來產生的，所以資料就很重要，直覺的做法是一邊找資料一邊進行，但這樣看起來程式碼比較亂。所以一般建議先把對應的資料整理準備好，再根據整理好的資料來產生 DOM

例如 types，就是從 zType_chose 裡先抽取出來的

// 生成类型数据
var types = [{ text: "计算机期类型" }]
    .concat(zType_chose.map(t => ({
        value: t.name,
        text: t.name
    })));

整理清單資料的時候，map、filter 和 reduce 基本上是標配(更複雜的情況可以考慮 RxJs)

你已經把 id 改成 class 了，這很好，為後面使用 $.fn.close() 掃清了障礙。因為我沒有太多時間進一步去處理，所以把問題留給你：考慮在 HTML 裡定義 select，然後在程式碼裡進行細節處理(例如隱藏)。如果select 還是要根據資料來定義，可以一開始就把第一條的select 全部填完，方便後面clone —— 當然這種情況下，把完善tr 的過程封裝在一個函數裡，甚至可以不用clone，直接建立tr 也行。