前端排坑

一、 标签选择（通过标签属性）

$(‘input[name="company_type"]‘) 

二、 docment方法和onclick方法

$(document).on(‘change‘, ‘input[name="company_type"].mg-checkbox‘, function () {})

# 一般新生成（页面加载完后，通过点击或其他操作新生成）的标签，这样的标签需要用document方法来绑定事件，或者在标签内部直接绑定。以点击事件为例：
(1) $(document).on(‘click‘, ‘input[name="company_type"].mg-checkbox‘, function () {})
(2) <div onclick="remove_archives_data(this, ‘ + result.user_id + ‘, \‘‘ + val + ‘\‘ ,0 )"></div>

其中：‘ +参数+ ‘  为前端语法参数为前端的变量

在标签中绑定onclick事件时，无论这个标签什么时候生成，都没有关系。但 内部所传的参数，为字符串时，需要以转义符 \‘参数\‘ 将参数引住，否则会报undefined错误

onclick事件的阻止事件冒泡的方法为：在函数中添加下面三行代码，只要在函数内，什么位置都行
var e = window.event || arguments.callee.caller.arguments[0];
e.stopPropagation();
e.preventDefault();

三、 给table的tbody的添加滚动条

#diamond_list_table  为table的id
#diamond_list 为tbody的id

#diamond_list {
            display: block;
            height: 500px;
            overflow-y: scroll;
			overflow-x: hidden;
			
        }
        
#diamond_list_table thead {
	display: table;
	width: 100%;
	table-layout: fixed;
}     
#diamond_list tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}     
# width: 100%;可以自由调整，保证列与列之间的间隔和每列的上下对齐

四、 重新加载JS文件

$.getScript("/manage/js/permission_manage.js")  # 引号内是JS文件的路径

五、 遍历多选

1. 普通遍历
$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});

2. 取得选中标签的属性值
function batch_translate() {
            var $chooseWord = $(‘.m_choose_word‘);  // m_choose_word为每个选择框标签的类
            $chooseWord.each(function () {
                if ($(this).prop(‘checked‘)) {
                    var this_input = $(this);
                    var m_word = this_input.attr(‘m_word‘);
                    if (m_word === ‘‘ || m_word === undefined) {
                        return false
                    }
                    share_translate({words: m_word, baidu_to: ‘zh‘, google_to: ‘zh‘}, function (result) {
                        if (result.state === 1) {
                            this_input.parent().parent().next().find("a").text(result.words)
                        }
                    });
                }
            });
        }

3. 将遍历的选中标签的值存储在列表中
        function delete_emp_many() {
            if (confirm(msg)) {
                var id_list = [];
                var $chooseEmp = $(‘.m_choose_emp‘);
                $chooseEmp.each(function () {
                    if ($(this).prop(‘checked‘)) {
                        var empId = $(this).attr(‘emp_id‘);
                        id_list.push(empId);
                    }
                });
                if (id_list.length === 0) {
                    mg_error(‘请先选择要删除的数据‘);
                    return false
                }
                $.ajax({
                    url: ‘/del/emps‘,
                    type: ‘post‘,
                    dataType: ‘json‘,
                    data: {
                        ‘id_list‘: JSON.stringify(id_list),
                    },
                    success: function (data) {
                        if (data.state === 0) {
                            search()
                        } else if (data.state === 1) {
                            if (data.redirect) {
                                window.location.href = data.redirect
                            } else if (data.message) {
                                alert(data.message)
                            }
                        }
                    }
                })
            }
        }

六、 全选和单选控制

 <!-- 靠js控制全选和取消全选 -->
    
    <!-- 单独的父复选框（最上面的全选控制标签）-->
    <th id="checkallTh"><input type="checkbox" id="checkAll" name="checkAll"/>
    <!-- 所有子复选框 -->
    <input type="checkbox" emp_id="‘ + emp.ID + ‘" class="m_choose_emp" name="checkItem"/>
    
    
    <script>
        $(function () {
            function initTableCheckbox() {
                /*“全选/反选”复选框*/
                var $thr = $(‘table thead tr‘);
                var $tbr = $(‘table tbody tr‘);
                var $checkAll = $thr.find(‘input‘);
                $checkAll.click(function (event) {
                    /*将所有行的选中状态设成全选框的选中状态*/
                    $tbr.find(‘input‘).prop(‘checked‘, $(this).prop(‘checked‘));
                    /*并调整所有选中行的CSS样式*/
                    if ($(this).prop(‘checked‘)) {
                        $tbr.find(‘input‘).parent().parent().addClass(‘warning‘);
                    } else {
                        $tbr.find(‘input‘).parent().parent().removeClass(‘warning‘);
                    }
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击全选框所在单元格时也触发全选框的点击操作*/
                var $checkAllTh = $(‘#checkallTh‘);
                $checkAllTh.click(function () {
                    $(‘tbody‘).find(‘input‘).click();
                });

                /*点击每一行的选中复选框时*/
                $tbr.find(‘input‘).click(function (event) {
                    /*调整选中行的CSS样式*/
                    $(this).parent().parent().toggleClass(‘warning‘);
                    /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
                    $checkAll.prop(‘checked‘, $tbr.find(‘input:checked‘).length == $tbr.length ? true : false);
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击每一行时也触发该行的选中操作*/
                $tbr.click(function () {
                    $(this).find(‘input‘).click();
                });
            }

            initTableCheckbox();
        });
    </script>

前端-排坑

原文：https://www.cnblogs.com/Mcoming/p/13609129.html