jquery table的click事件 会覆盖tr的click事件 咋办

$(table).click(function(){
alert(1)
})

$(table tbody tr).click(funtion(){
alert(2)})

这样子只会alert(1) 不会弹出2 有啥办法让他们都执行吗

7个回答

tr点击事件也是table点击的时间 直接用:
$(table tbody tr).click(funtion(){
alert(1);
alert(2);
}),

一个单击一个为双击,就是将tr click写在table click里面,不过要判断第二次点击和第一次点击之间的时间差

table tbody tr 把他换成具体的标签

题主的代码是:
$(table).click(function(){
alert(1)
})
$(table tbody tr).click(**_funtion_**(){
alert(2)})

tr单击事件的function错了.所以tr的单击事件未生效.
所以.正确的代码应该是:
$("table").click(function(){
alert()
});

$("table tbody tr").click(function(){
alert(2)
})

qq_24621911
Liulin_Think 回复xiaozhutou_love: 如果我理解的没有错的话,你应该是想阻止冒泡事件,那么应该在子元素中添加代码.修改后的代码:
大约 2 年之前 回复
qq_24621911
Liulin_Think 回复xiaozhutou_love: 你想要的效果是什么?是要执行tr的点击事件的时候不执行table事件是吗?
大约 2 年之前 回复
xiaozhutou_love
xiaozhutou_love 然后现在我想让父子元素的点击事件都能够执行
大约 2 年之前 回复
xiaozhutou_love
xiaozhutou_love 不好意思 那是手误 。问题不在这 写对的情况下 也只是 alert(1) 因为tr 是table 的子元素 默认会执行table的点击事件
大约 2 年之前 回复

如果我理解的没有错的话,你应该是想阻止冒泡事件,那么应该在子元素中添加代码.修改后的代码:
$("table tbody tr").click(function(e){
e.stopPropagation();
alert(2)
});
$("table").click(function(){
alert(1);
});

参考网址:https://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

//简单,阻止子元素冒泡反应就可以了,如下,拷贝替换原来的tr事件
$(table tbody tr).click(funtion(e){
    e.stopPropagation();//阻止冒泡 
    alert(2);
})
u014074697
张大教主 没问题的,父元素的click会执行,而子元素不会继承父元素,会执行自己的代码,我测试过了,执行成功
大约 2 年之前 回复
xiaozhutou_love
xiaozhutou_love 回复张大教主:不是这个意思 我是想让父子元素的click事件都执行 有办法吗
大约 2 年之前 回复
u014074697
张大教主 $("table tbody tr")不要忘记加引号
大约 2 年之前 回复

$("table").on("click",function(){
alert(1);
});
$("table body tr").on("click",function(){
alert(2);
});
try

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jquery2.0 追加到的html的input绑定click事件
jquery2.0后,在页面加载的事件里,动态绑定事件则是用到on方法。大家看一下以下代码段: ``` $(function () { var tstr = ""; tstr += "<tr><td><input type='text' ></td>"; tstr += "<td style='vertical-align: middle;'>删除<h2>×</h2></a>"; tstr += "</td></tr>"; $(".guser tbody").append(tstr); $(".guser tr input").on("click", function () { alert(111); }); }) ``` 在类名为guser的table input上,并没有绑定到click事件。这是什么原因?
如何用JQuery移除table中的一列?
``` <html> <head> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <table id="thisTable"> <tr> <td>id</td> <td name="Myname" onclick="Myclick()">name</td> <td>sex</td> </tr> <tr> <td>001</td> <td name="Myname" onclick="Myclick()">Xiaoming</td> <td>man</td> </tr> <tr> <td>002</td> <td name="Myname" onclick="Myclick()">Laowang</td> <td>man</td> </tr> <tr> <td>003</td> <td name="Myname" onclick="Myclick()">Yan</td> <td>Felman</td> </tr> </table> </body> <script> function Myclick(){ //console.log("click"); var Myname = document.getElementsByName("Myname"); for(var i=0;i<Myname.length;i++){ Myname[i].hidden="true"; } } </script> </html> ```
在spring mvc 中使用@ResponseBody将对象封装为json发送给前端,前端接并提取在页面时候变成了undefined,是不是版本或者什么原因?
spring mvc 中Controller的代码 ``` package cn.sxt.conntroller; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class JsonConntroller { @RequestMapping("/json") @ResponseBody public List<User> json(){ List<User> list = new ArrayList(); list.add(new User("jake", 10, "men")); list.add(new User("nico", 10, "women")); list.add(new User("joker", 10, "men")); return list; } } ``` index.jsp代码 ``` <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $("#b").click(function(){ $.post("json.do",function(data){ var html=""; for(var i = 0;i<data.length;i++){ html+="<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].sex+"</td></tr>" } $("#content").html(html); }); }); }); </script> </head> <body> <input type="button" id="b" value="获取信息"> <table width="80%" align="center"> <tr> <td>name</td> <td>age</td> <td>sex</td> </tr> <tbody id="content"></tbody> </table> </body> </html> ``` 在浏览器上面的展示图 ![图片说明](https://img-ask.csdn.net/upload/202001/13/1578907341_150073.png) 导入的jar包和jswen'jian jackson-annotations-2.9.9.jar jackson-core-2.9.9.jar jackson-databind-2.9.9.jar jquery-3.4.1.min.js
表格 行的单击事件为何不生效?
``` <style> .tr-click{ background-color: #EFA2A9 ; } table tr:hover{ background-color: #EFA2A9 ; } </style> <table class="table"> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table> <button id="btn">改变表格</button> <script type="text/javascript" src="jquery/jquery.min.js" ></script> <script type="application/javascript"> $(function(){ $("tr").click(function(){ alert('123'); $("tr").removeClass("tr-click"); $(this).addClass("tr-click"); }) $("#btn").click(function(){ var html="<tr><td>000</td><td>000</td></tr><tr><td>000</td><td>000</td></tr>"; $(".table").replaceWith("<table>"+html+"</table>"); }) }) </script> 如代码建一个表格,为表格的行设置单击事件,更换背景色,此时单击事件正常。 同时设置一个按钮,通过按钮单击事件使用replaceWith方法替换表格内容,这个时候表格行的单击事件不生效了。 百思不得其解,在浏览器查看了源代码,发现多了<tbody></tbody>标签,但是我设置的单击事件选择器是 tr ,就算多了tbody标签也不应该不生效吧,大佬们帮忙看看是怎么回事,万分感谢。 ```
js全选后遍历取出的值是undefined改怎么解决?
![图片说明](https://img-ask.csdn.net/upload/202001/03/1578038135_799686.jpg) ![图片说明](https://img-ask.csdn.net/upload/202001/03/1578038113_161069.jpg) ``` //复选框监听事件 table.on('checkbox(language)', function (obj) { tr = obj.tr; if (obj.checked == true) { $('input:checkbox').each(function () { chechData.push(JSON.stringify(obj.data)); }); } else { //未选中时移除 for (var i = chechData.length - 1; i >= 0; i--) { if (chechData[i].id == obj.data.id) { chechData.splice(i, 1); } } } }); ``` ``` ``` //选中常用语并赋值 $('#okCom').click('on', function () { debugger var text = parent.document.getElementById("orderContent").value;//获取父页面input框的值 var value = text; for (var i = 0; i < chechData.length; i++) { if( value!== null && value >= 0){ value += chechData[i].text + ""; }else { value = chechData[i].text + "," + value; } } if (text !== null){ window.parent.$('#orderContent').val(value); }else { window.parent.$('#orderContent').val(value).append(text); } window.parent.colseComLanguagePage() }); ``` ``` 该怎么解决呢?
jquery table 数字问题
``` $.each(typeData, function (i, n) { //这里是增加1 和减1 HTML var jisuan = "<div class=\"amount_box\"><a href=\"javascript:;\" class=\"reduce reSty\">-</a><input type=\"text\" value=\"1\" class=\"sum\"><a href=\"javascript:;\" class=\"plus\">+</a></div>"; //tr表格 tbBody += "<tr><td id=" + n.ID + ">" + n.ID + "</td>" + "<td>" + n.mingcheng + "</td> " + "<td>" + jisuan + "</td>" + "<td class='sum_price'>" + n.jiage + "</td>" + "<td class='price'>ss</td><td onClick='d(this)'><i class='fa fa-trash-o'></i></td></tr>" //遍历#myTb下所有的进行比对重复则为追加 if (!$("#myTb tr").children('td[id=' + n.ID + ']').length) { $("#myTb").append(tbBody); } else { layer.msg('已存在-' + n.mingcheng + '!', { icon: 5, time: 3000 }); return; } //操作Plus类 input 进行加1运算,问题出在这里, 如果追加3行tr 点一下.plus类则会出现+3次的现象,不知道问题出在哪里 //放在这里点一次加+2,放到if里可以执行,如果表有3行,执行后第一行点.plus会出现加3次input显示3,第二行加2次,第3行加一次 //怎么操作让他们3行数据互不影响?点击plus input里的数加1 而不是根据行的多少来添加 $('.plus').click(function () { var $inputVal = $(this).prev('input'), $count = parseInt($inputVal.val()) + 1; $inputVal.val($count); }); }) ``` //操作Plus类 input 进行加1运算,问题出在这里, 如果追加3行tr 点一下.plus类则会出现+3次的现象,不知道问题出在哪里 //放在这里点一次加+2,放到if里可以执行,如果表有3行,执行后第一行点.plus会出现加3次input显示3,第二行加2次,第3行加一次 //怎么操作让他们3行数据互不影响?点击plus input里的数+1 而不是根据行的多少来添加
如何使用jq在点击表格某一行时,让此行之前的所有行都变色
假如我点击exercise1 中的set2,我怎么样才可以让set1 和set2同时改变背景颜色? 代码如下: ``` <!DOCTYPE html> <html> <body> <div> <!--exercise table here--> <table border="1"> <thead> <tr> <th>Exercise</th> <th>Sets</th> <th>Reps</th> <th>Kg</th> </tr> </thead> <tbody> <tr> <td rowspan="3" id="ex1">Exercise1</td> <td class="ex1set">1</td> <td>12</td> <td>0</td> </tr> <tr> <td class="ex1set">2</td> <td>12</td> <td>0</td> </tr> <tr> <td class="ex1set">3</td> <td>12</td> <td>0</td> </tr> <tr> <td rowspan="3" id="ex2">Exercise2</td> <td class="ex2set">1</td> <td>10</td> <td>10</td> </tr> <tr> <td class="ex2set">2</td> <td>10</td> <td>10</td> </tr> <tr> <td class="ex2set">3</td> <td>10</td> <td>10</td> </tr> </tbody> </table> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> for (let i = 1; i <= 2; i++) { $("#ex" + i).click(function () { $(this).css("backgroundColor", "#99ffbb") }); $(".ex"+i+"set").each(function (j, n) { let len = $(".ex"+i+"set").length $(n).click(function () { if (j < len - 1) { $(n).css("backgroundColor", "#99ffbb") } else if (j >= len - 1) { $("#ex"+i).css("backgroundColor", "#99ffbb") } }) }); } </script> </html> ```
jquery怎么获取不到tr的id呢?每次都是undefine
<form id="form1" runat="server"> <div style=" border:1px solid #f00;"> <table id="table1"> <tr id="tr1"> <td>字段名</td> <td>字段类型</td> <td>字段大小</td> <td>控件类型</td> <td>表名</td> </tr> <tr id="trFormatStr_1" onclick="fnTrClick()" runat="server"> <td id="td1"><asp:TextBox ID="tbxStrName" runat="server" Text=''></asp:TextBox></td> <td id="td2"><asp:TextBox ID="tbxStrType" runat="server" Text=''></asp:TextBox></td> <td id="td3"><asp:TextBox ID="tbxStrSize" runat="server" Text=''></asp:TextBox></td> <td id="td4"> <asp:DropDownList ID="ddlControlType" runat="server"> </asp:DropDownList> </td> <td id="td5"><asp:TextBox ID="TextBox1" runat="server" Text=''></asp:TextBox></td> </tr> </table> </div> </form> <!--</body> </html> --> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(function () { // $("#trFormatStr_1").click(function () { // alert(1); // }); }); function fnTrClick() { alert($(this).attr("id")); alert(2); } </script> 脚本代码图片: ![图片说明](https://img-ask.csdn.net/upload/201607/25/1469435147_290759.jpg) 运行起来,id没变的,可看图片 ![图片说明](https://img-ask.csdn.net/upload/201607/25/1469434846_984274.jpg)
这个datatable 的ajax 怎么写,麻烦大佬给填充一下
这里边的ajax请求不会写,麻烦大佬给填充一下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>二十九师信息</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <style> .content { margin: 50px auto; border: 1px solid #ccc; } .operation { margin: 10px; } .operation>button { margin: 10px; } #books_length { float: left; margin-left: 20px; } #books_filter { float: right; margin-right: 20px; } #books { margin: 5px; text-align: center; } .center-block { display: block; width: 21%; margin: auto; } </style> </head> <body> <section class="content"> <div class="btn-group operation"> <button id="btn_add" type="button" class="btn bg-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn bg-info"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button type="button" class="btn btn-primary" >导出Excel</button> </div> <!-- 添加模块 --> <div class="modal fade" id="addBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">添加信息</h4> </div> <div id="addBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="bookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="bookName" type="text"> </div> </div> <div class="form-group"> <label for="bookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="bookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="bookPrice" class="col-sm-2 control-label">家庭住址:*</label> <div class="col-sm-10"> <input class="form-control" id="bookPrice" type="text"> </div> </div> <div class="form-group"> <label for="bookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="bookPublish" type="text"> </div> </div> <div class="form-group"> <label for="bookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="bookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 修改模块 --> <div class="modal fade" id="editBookInfo" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">修改信息</h4> </div> <div id="editBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="editBookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="editBookName" type="text"> </div> </div> <div class="form-group"> <label for="editBookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="editBookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="editBookPrice" class="col-sm-2 control-label">家庭住址:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPrice" type="text"> </div> </div> <div class="form-group"> <label for="editBookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPublish" type="text"> </div> </div> <div class="form-group"> <label for="editBookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="editBookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 删除模块 --> <div class="modal fade" id="deleteBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">确认要删除吗?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button> </div> </div> </div> </div> <!-- 页面view层 --> <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>家庭住址</th> <th>联系电话</th> <th>备注</th> </tr> </thead> <tbody></tbody> </table> </section> </body> <script> var data = [['', '李云龙', '男', '三八六旅', '133435435', '厉害']] var titles = ['','姓名', '性别', '家庭住址', '联系电话', '备注'] $(function () { var table = $('#books').DataTable({ data: data, "pagingType": "full_numbers", "bSort": true, "language": { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "buttons": [{ 'extend': 'excel', 'text': '导出为Excel统计表',//定义导出excel按钮的文字 'className': 'btn btn-primary', //按钮的class样式 'exportOptions': { 'modifier': { 'page': 'all' } } }], "columnDefs": [{ "searchable": true, "orderable": false, "targets": 0 }], "order": [[0, 'asc']], }); table.on('order.dt search.dt', function() { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); }).draw(); $('#books tbody').on('click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $("#cancelAdd").on('click', function() { console.log('cancelAdd'); $("#addBookModal").find('input').val('') }) $("#addBooksInfo").on('click', function() { console.log('addBooksInfo'); if (data.length) { if ($("#addBookModal").find('input').val() !== '') { var bookbutton = $("#bookbutton").val() var bookName = $("#bookName").val() var bookAuthor = $("#bookAuthor").val() var bookPrice = $("#bookPrice").val() var bookPublish = $("#bookPublish").val() var bookISBN = $("#bookISBN").val() var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN); for (var i = 0; i < addBookInfos.length; i++) { if (addBookInfos[i] === '') { alert(titles[i] + '内容不能为空') } } table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw(); $("#addBookModal").find('input').val('') } } else { alert('请输入内容') } }) $("#addBooksInfo").click(); $("#btn_add").click(function(){ console.log('add'); $("#addBook").modal() }); $('#btn_edit').click(function () { console.log('edit'); if (table.rows('.selected').data().length) { $("#editBookInfo").modal() var rowData = table.rows('.selected').data()[0]; var inputs = $("#editBookModal").find('input') for (var i = 0; i < inputs.length; i++) { $(inputs[i]).val(rowData[i + 1]) } } else { alert('请选择项目'); } }); $("#saveEdit").click(function() { var editBookName = $("#editBookName").val() var editBookAuthor = $("#editBookAuthor").val() var editBookPrice = $("#editBookPrice").val() var editBookPublish = $("#editBookPublish").val() var editBookISBN = $("#editBookISBN").val() var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN); var tds = Array.prototype.slice.call($('.selected td')) for (var i = 0; i < newRowData.length; i++) { if (newRowData[i] !== '') { tds[i + 1].innerHTML = newRowData[i]; } else { alert(titles[i] + '内容不能为空') } } }) $("#cancelEdit").click(function() { console.log('cancelAdd'); $("#editBookModal").find('input').val('') }) $('#btn_delete').click(function () { if (table.rows('.selected').data().length) { $("#deleteBook").modal() } else { alert('请选择项目'); } }); $('#delete').click(function () { table.row('.selected').remove().draw(false); }); }) </script> </html> ```
在data最后一列加上删除和修改按钮,自己加了之后一直报数据项错误,麻烦大佬们帮下忙?
在data最后一列加上删除和修改按钮,自己加了之后一直报数据项错误,麻烦大佬帮下忙 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>二十九师信息</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <style> .content { margin: 50px auto; border: 1px solid #ccc; } .operation { margin: 10px; } .operation>button { margin: 10px; } #books_length { float: left; margin-left: 20px; } #books_filter { float: right; margin-right: 20px; } #books { margin: 5px; text-align: center; } .center-block { display: block; width: 21%; margin: auto; } </style> </head> <body> <section class="content"> <div class="btn-group operation"> <button id="btn_add" type="button" class="btn bg-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn bg-info"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button type="button" class="btn btn-primary" >导出Excel</button> </div> <!-- 添加模块 --> <div class="modal fade" id="addBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">添加信息</h4> </div> <div id="addBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="bookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="bookName" type="text"> </div> </div> <div class="form-group"> <label for="bookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="bookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="bookPrice" class="col-sm-2 control-label">家庭住址:*</label> <div class="col-sm-10"> <input class="form-control" id="bookPrice" type="text"> </div> </div> <div class="form-group"> <label for="bookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="bookPublish" type="text"> </div> </div> <div class="form-group"> <label for="bookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="bookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 修改模块 --> <div class="modal fade" id="editBookInfo" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">修改信息</h4> </div> <div id="editBookModal" class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label for="editBookName" class="col-sm-2 control-label">姓名:</label> <div class="col-sm-10"> <input class="form-control" id="editBookName" type="text"> </div> </div> <div class="form-group"> <label for="editBookAuthor" class="col-sm-2 control-label">性别:</label> <div class="col-sm-10"> <input class="form-control" id="editBookAuthor" type="text"> </div> </div> <div class="form-group"> <label for="editBookPrice" class="col-sm-2 control-label">家庭住址:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPrice" type="text"> </div> </div> <div class="form-group"> <label for="editBookPublish" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-10"> <input class="form-control" id="editBookPublish" type="text"> </div> </div> <div class="form-group"> <label for="editBookISBN" class="col-sm-2 control-label">备注:</label> <div class="col-sm-10"> <input class="form-control" id="editBookISBN" type="text"> </div> </div> </div> </div> <div class="modal-footer"> <div class="center-block"> <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button> </div> </div> </div> </div> </div> <!-- 删除模块 --> <div class="modal fade" id="deleteBook" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">确认要删除吗?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button> </div> </div> </div> </div> <!-- 页面view层 --> <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>家庭住址</th> <th>联系电话</th> <th>备注</th> </tr> </thead> <tbody></tbody> </table> </section> </body> <script> var data = [['', '李云龙', '男', '三八六旅', '133435435', '厉害']] var titles = ['','姓名', '性别', '家庭住址', '联系电话', '备注'] $(function () { var table = $('#books').DataTable({ data: data, "pagingType": "full_numbers", "bSort": true, "language": { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "buttons": [{ 'extend': 'excel', 'text': '导出为Excel统计表',//定义导出excel按钮的文字 'className': 'btn btn-primary', //按钮的class样式 'exportOptions': { 'modifier': { 'page': 'all' } } }], "columnDefs": [{ "searchable": true, "orderable": false, "targets": 0 }], "order": [[0, 'asc']], }); table.on('order.dt search.dt', function() { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); }).draw(); $('#books tbody').on('click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $("#cancelAdd").on('click', function() { console.log('cancelAdd'); $("#addBookModal").find('input').val('') }) $("#addBooksInfo").on('click', function() { console.log('addBooksInfo'); if (data.length) { if ($("#addBookModal").find('input').val() !== '') { var bookbutton = $("#bookbutton").val() var bookName = $("#bookName").val() var bookAuthor = $("#bookAuthor").val() var bookPrice = $("#bookPrice").val() var bookPublish = $("#bookPublish").val() var bookISBN = $("#bookISBN").val() var addBookInfos = [].concat(bookName, bookAuthor, bookPrice, bookPublish, bookISBN); for (var i = 0; i < addBookInfos.length; i++) { if (addBookInfos[i] === '') { alert(titles[i] + '内容不能为空') } } table.row.add(['', bookName, bookAuthor, bookPrice, bookPublish, bookISBN]).draw(); $("#addBookModal").find('input').val('') } } else { alert('请输入内容') } }) $("#addBooksInfo").click(); $("#btn_add").click(function(){ console.log('add'); $("#addBook").modal() }); $('#btn_edit').click(function () { console.log('edit'); if (table.rows('.selected').data().length) { $("#editBookInfo").modal() var rowData = table.rows('.selected').data()[0]; var inputs = $("#editBookModal").find('input') for (var i = 0; i < inputs.length; i++) { $(inputs[i]).val(rowData[i + 1]) } } else { alert('请选择项目'); } }); $("#saveEdit").click(function() { var editBookName = $("#editBookName").val() var editBookAuthor = $("#editBookAuthor").val() var editBookPrice = $("#editBookPrice").val() var editBookPublish = $("#editBookPublish").val() var editBookISBN = $("#editBookISBN").val() var newRowData = [].concat(editBookName, editBookAuthor, editBookPrice, editBookPublish, editBookISBN); var tds = Array.prototype.slice.call($('.selected td')) for (var i = 0; i < newRowData.length; i++) { if (newRowData[i] !== '') { tds[i + 1].innerHTML = newRowData[i]; } else { alert(titles[i] + '内容不能为空') } } }) $("#cancelEdit").click(function() { console.log('cancelAdd'); $("#editBookModal").find('input').val('') }) $('#btn_delete').click(function () { if (table.rows('.selected').data().length) { $("#deleteBook").modal() } else { alert('请选择项目'); } }); $('#delete').click(function () { table.row('.selected').remove().draw(false); }); }) </script> </html> ``麻烦各位大佬帮下忙
请教jquery单击表格的tr弹出对话框的问题
JS <script> $(document).ready(tableClick); function tableClick(){ $("#t1>tbody>tr").click(function(){ alert("dd"); }); } </script> html: <table id="t1" width="100%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>标题</th> <th>作者</th> <th>更新时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>啊发撒旦发生</td> <td>test</td> <td>2009/12/12</td> <td>删除 修改</td> </tr> <tr> <td>阿斯顿发撒旦发生发</td> <td>test</td> <td>2009/12/12</td> <td>删除 修改</td> </tr> </tbody> </table> 现在的问题是,鼠标单击行可以正确弹出提示框,但是我想要的是,表格的最后一列不支持此操作,就是说在最后一列上单击鼠标不想弹出提示框,请问该如何写呢,如果我在最后一列的td加上class="noAlert",是否可以过滤掉这个td的单击呢,谢谢了 还有一个问题就是:alert(34.33+3.434);为什么等于37.763999999999996
jquery 单击事件 局部变量 越界 问题
问题描述 从数据库中读取出N条记录 每条记录都对应一个按钮 使用Jquery为每个按钮增加一个单击事件 单击按钮 所在行要进行更新的单元格数据 变成输入框可以更新所在行的数据 JavaScript文件代码 [code="js"] $(document).ready(function() { // 为修改按钮注册单击事件 var modifies = $(".modify"); for (var i =0; i < modifies.length; i++) { $(modifies[i]).click(function() { // 定位该修改按钮所在表单中typeName所在Td位置 // 注:查找的是Id alert(i); var typeName = "#" + (i+1) + "_typeNameCn"; var typeNameTd = $(typeName); // 保存单元格中的数据 var text = typeNameTd.text(); // 清空td里面的内容 typeNameTd.empty(); alert(text); // 建立一个文本框,即一个input的元素节点 // 注:name属性的命名要和action中的命名一致 var input = $("<input type=\"text\" name=\"mt.typeNameCn\" />"); // 设置文本框的值是保存起来的文本内容 input.attr("value", text); // 将文本框中的内容加入到td中 typeNameTd.append( input ); // 隐藏"修改"按钮 $(modifies[i]).css("display","none"); // 找到提交按钮,让提交按钮显示出来 var submit = "#" + i +"_submit"; $(submit).css("display","block"); }); } }); [/code] jsp文件代码 [code="java"] <table> <tr> <td> 杂志类型编号 </td> <td> 杂志类型名称 </td> <td> 操作 </td> </tr> <s:iterator value="mts"> <s:form name="editMagazineTypeForm" method="post" theme="simple"> <tr> <td> <s:property value="typeId" /> &nbsp; </td> <% //指定对应的id值,便于定位单元格 %> <td id="${typeId}_typeNameCn"> <s:property value="typeNameCn" /> </td> <td> <s:hidden name="mt.typeId" value="%{typeId}"></s:hidden> <s:submit value="修改fdfdf" onclick="this.disabled='true'" cssStyle="display:none;"></s:submit> <button class="modify" onclick="%{typeId}"> 修改 </button> </td> </tr> </s:form> </s:iterator> </table> [/code] 问题:当我单击按钮之后,经过断点测试发现 for循环中的i变量不是0而是2 也就是说局部变量在完成循环之后 并没有从内存中清除 而是保留了下来 继续递增 不知道这样的描述是否正确 请帮忙告知如何解决 谢谢 [b]问题补充:[/b] 是的每次都是打印的2 就是i最后一次参与循环的值 [b]问题补充:[/b] ********************************************************* 我是新来的 感觉自己提出的问题自己不能回答 就做问题补充了 高手别见怪啊 ********************************************************* each方法比较好 进行遍历效果不错 但是我想实现的是 "为查找到的所有按钮添加单击事件" 如何做呢? 我使用上面我写的方法为每个按钮添加了单击事件 但是 i的值不变了 执行上面的JS代码 如果i的值不变的话 相当于为多个按钮 注册了相同的单击事件 我的目的是 通过单击按钮直接更新 "相应" 的数据记录
easyui linkbutton每點擊一次查詢就增加了一個放大鏡圖標?
jquery easyui linkbutton控件,每點擊一次,就會在左邊多出一個放大鏡按鈕,可以從哪裡下手查找原因呢? ![图片说明](https://img-ask.csdn.net/upload/201911/12/1573547368_287908.jpg) 部分代碼如下: ``` <td> <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"></a> </td> </tr> </table> </div> <div id="idShowRpt" class="easyui-panel" style="width:100%;height:600px;overflow-y:auto;overflow-x:hidden;"> </div> </div> @section StylesContent { } @section ScriptsContent { <script> $(function () { btnSearch(); }); function btnSearch() { $("#btnQuery").bind('click', function () { var vPeriod = $("#txtPeriod").val(); var vSellCode = $("#txtSell").val(); var vBuyCode = $("#txtBuy").val(); $('#idShowRpt').panel({ href: "@Url.Content("~/******/*****/*****")", fit:true, method:'post', queryParams: { strPeriod: vPeriod, strSellCode:vSellCode,strBuyCode:vBuyCode}, border: false, onLoad: function () { } }); }) }; </script> } ```
jquery 添加一行表单,无法添加到 末尾
![图片说明](https://img-ask.csdn.net/upload/201502/11/1423664440_145410.png) 想每次在表单的末尾新生成新的一行,但每次都是在表单的开始位置插入新生成的行,刚开始玩jquery,哪位能指导一下?多谢。 代码如下: var jq = $.noConflict(); //另外一种 jq(function() { jq("#addOneRow").click(function() { var tempTr = jq("tr:first").next().clone(true); jq("tr:last").after(tempTr); jq("#create:last > td > #name").val("");//新添加行name为空 jq("#create:last > td > #address").val("");//新添加行address为空 }); jq(".delOneRow").click(function() { alert("tr="+jq("tr").length) if (jq("tr").length <3) { alert("至少保留一行!"); } else { if (confirm("确认删除?")) { jq(this).parent().parent().remove(); } } }); }); 页面代码: <spring:url value="/insertForm/insertForm.html" var="formUrl" /> <form:form modelAttribute="fm" action="${fn:escapeXml(formUrl)}" method="get" class="form-horizontal" id="form1"> <fieldset> <table border="1"> <tr> <td>产品名称</td> <td>价格</td> <td>数量</td> <td>类型</td> <td>联系人</td> <td>进货日期</td> <td>其他</td> </tr> <tr id="create"> <td>姓名:</td> <td><input type="text" id="name" name="name" /></td> <td>地址:</td> <td><input type="text" id="address" name="address" /></td> <td><input type="button" class="delOneRow" value="删除" /></td> </tr> </table> <input type="button" id="addOneRow" value="添加一行" /> <button type="submit" >提交</button> 会的请指点一下,多谢
jquery弹出确定 取消的对话框怎么实现的
我这里点击事件没反应,弹不出来不知道怎么回事 ``` <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>电影列表</title> <script src="script/jquery-1.10.2.js"></script> <script src="script/jquery.validate.js"></script> <script type="text/javaScript"> $(function(){ $("#but").click(function(){ alert("hehe"); }); }); </script> </head> <body> <form action="movieList.jsp"method="get"> <br>电影分类:<select name="id"> <option value="0">所有分类</option> <c:forEach var="c" items="${categorylist}"> <c:if test="${param.id==c.id}"> <option value="${c.id}" selected="selected">${c.name}</option> </c:if> <c:if test="${param.id!=c.id}"> <option value="${c.id}">${c.name}</option> </c:if> </c:forEach> </select> 电影名称:<input type="text"name="title"value=""/> <input type="button"value="查询"/> </form> <hr/> <table id="movieTable" border="1"> <thead> <tr> <th>编辑</th> <th>电影名称</th> <th>编号</th> <th>分类</th> <th>导演</th> <th>上映时间</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach var="m" items="${movielist }"> <tr> <td><a href="MovieUpdateServlet?id=${m.id}">编辑</a><input id="but"type="button" value="删除"/></td> <td>${ m.title}</td> <td>${m.movieCode}</td> <td>${m.category.name}</td> <td>${m.director}</td> <td>${m.dateReleased}</td> <td><a href="MovieDeleteServlet?id=${m.id}"></a></td> </tr> </c:forEach> </tbody> </table> <hr/> <p><a href="MovieAddServlet">添加新电影</a></p> </body> </html> ```
jquery 表格行选一行选中checkbox,但首次点击checkbox要点两次才能选中
这是js 行选的代码段,可以行选,但是点击checkbox本身要点鼠标两次才能选中,求原因。 ``` // 行选中 $("table tbody tr").click(function() { var input = $(this).find("input[type=checkbox]");//获取checkbox //给checkbox的click添加阻止冒泡事件 input.click(function(event){ event.stopPropagation(); }); //判断当前checkbox是否为选中状态 if(input.prop("checked")){ input.prop("checked",false); } else{ input.prop("checked",true); } }); ```
把window.open的页面改成jquery层的方式展现,并且把选择出来的内容传到当前页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script> <title>choose </title> <script type="text/javascript"> jQuery(function($){ //添加行 $("#add1").click(function(){ var _len = $("#table2 tr").length; $("#table2>tbody").append('<tr><td>'+_len+'</td><td><input id="task'+_len+'" type="text" /></td><td><input id="username'+_len+'" type="text" /></td><td><button onclick="deltr(this)">删除</button><input id="showBox" onclick="app('+_len+')" type="button" value="人员" /></td></tr>') }); }); //删除行的函数,必须要放domready函数外面 function deltr(delbtn){ $(delbtn).parents("tr").remove(); }; function app(delbtn){ //alert(delbtn); window.open("../View/Choose.aspx"); var i = "123"; document.getElementById("username"+delbtn).value = i; alert(document.getElementById("username"+delbtn).value); } jQuery(function($){ //定义删除按钮事件绑定 //写里边,防止污染全局命名空间 function deltr(){ $(this).parents("tr").remove(); }; //已有删除按钮初始化绑定删除事件 $("#table2 .del").click(deltr); //添加行 $("#add2").click(function(){ $('<tr><td>新增行2</td><td><button class="del">删除</button></td></tr>') //在这里给删除按钮再次绑定事件。 .find(".del").click(deltr).end() .appendTo($("#table2>tbody")); }); }); </script> </head> <body> <br/> <table id="table2"> <tbody> <tr> <td width="20%" nowrap="" bgcolor="#F3EFCD" class="STYLE7 td1"><strong>序号</strong></td> <td width="20%" nowrap="" bgcolor="#F3EFCD" class="STYLE7 td1"><strong>项目名称</strong></td> <td width="35%" nowrap="" bgcolor="#F3EFCD" class="STYLE7 td1"><strong>人员</strong></td> <td><input type="button" name="add1" id="add1" value="新增"/></td> </tr> </tbody> </table> </body> </html>
Thymeleaf异步请求发生灵异事件?
thymeleaf进行异步请求局部刷新页面后,checkbox的事件失效。 页面截图: ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564480211_701274.png) ``` <!-- HTML--> <td class="col-lg-1"> <input type="checkbox" name="cacheAllRoles"/> </td> <!-- JS--> <script type="text/javascript"> // 全选\全不选 cacheAllRoles $("input[name='cacheAllRoles']").on("click", function () { if ($(this).is(':checked')) { $('input[name="roleCheck"]').each(function () { $(this).prop("checked", true); }); } else { $('input[name="roleCheck"]').each(function () { $(this).prop("checked", false); }); } }); </script> ``` 页面初始化完成时,该事件是可用的; 当异步请求成功后,页面刷新完成,<input type="checkbox" name="cacheAllRoles"/>的事件失效。 我不知道我的问题描述的是否详细,反正就是很灵异。 前端白痴,不知道怎么排查...... 补充说明:这部分是异步请求的代码 ``` <!-- Role Table --> <div class="col-lg-4"> <div id="roleTable" th:fragment="roleTable"> <table class="table table-striped"> <thead> <tr> <td class="col-lg-1"> <input type="checkbox" name="cacheAllRoles"/> </td> <td class="col-lg-1">ID</td> <td class="col-lg-2" width="">角色名称</td> <td class="col-lg-2">描述</td> <td class="col-lg-2">配置</td> </tr> </thead> <tbody> <tr th:each="roles:${roleList}"> <td> <input type="checkbox" th:checked="${roles.configFlag}" th:value="${roles.roleId}" name="roleCheck"> </td> <td th:text="${roles.roleId}"></td> <td th:text="${roles.roleName}"></td> <td th:text="${roles.roleDescription}"></td> <td>config</td> </tr> </tbody> </table> </div> </div> //获取角色列表 function configRole(userId, username) { $("#roleTable").load("/urpCfgCtrl/getRoleListByUserId", {"userId": userId}); } ```
可编辑表格问题 jquery
做了一个可编辑表格,但是表格双击之后会变大,求大神解答。 ![图片说明](https://img-ask.csdn.net/upload/201510/27/1445937439_349902.png) js代码 ``` $(function() { //找到所有名字的单元格 var name = $("table tr td"); //给这些单元格注册鼠标点击事件 name.click(function() { //找到当前鼠标单击的td var tdObj = $(this); //保存原来的文本 var oldText = $(this).text(); //创建一个文本框 var inputObj = $("<input type='text' value='" + oldText + "'/>"); //去掉文本框的边框 //inputObj.size(100); inputObj.css("border-width", 0); //阻止文本框的点击事件 inputObj.click(function() { return false; }); //使文本框的宽度和td的宽度相同 inputObj.width(tdObj.width()); inputObj.height(tdObj.height()); //去掉文本框的外边距 inputObj.css("margin",0); inputObj.css("padding-right",0); inputObj.css("text-align", "center"); inputObj.css("font-size", "16px"); //inputObj.css("background-color", tdObj.css("background-color")); //把文本框放到td中 tdObj.html(inputObj); //文本框失去焦点的时候变为文本 inputObj.blur(function() { var newText = $(this).val(); tdObj.html(newText); }); //全选 inputObj.trigger("focus").trigger("select"); }); }); ``` css代码 ``` table { border:1px solid; margin:70px 0px 0px 0px; width: 1200px; font-family: 微软雅黑; border-collapse: collapse; position:absolute; } table tr td{ border:1px solid; } table tr th,td{ border:1px solid; width:80px; } table tr td input{ display:block; padding:0; margin:0; border:0; width:100%; } ``` 表格代码: ``` <table> <tr> <th>序</th> <th>经理</th> <th>CC</th> <th>行业</th> <th>省份</th> <th>对应产品</th> <th>对应子产品</th> <th>项目编码</th> <th>项目名称</th> <th>工作内容</th> <th>人员</th> <th>人周</th> </tr> <tr> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> <td><div class="tddiv">&nbsp;</div></td> </tr> </table> ```
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
使用 Docker 部署 Spring Boot 项目
Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下。首先构建一个简单的 S...
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
redis分布式锁,面试官请随便问,我都会
文章有点长并且绕,先来个图片缓冲下! 前言 现在的业务场景越来越复杂,使用的架构也就越来越复杂,分布式、高并发已经是业务要求的常态。像腾讯系的不少服务,还有CDN优化、异地多备份等处理。 说到分布式,就必然涉及到分布式锁的概念,如何保证不同机器不同线程的分布式锁同步呢? 实现要点 互斥性,同一时刻,智能有一个客户端持有锁。 防止死锁发生,如果持有锁的客户端崩溃没有主动释放锁,也要保证锁可以正常释...
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
Java世界最常用的工具类库
Apache Commons Apache Commons有很多子项目 Google Guava 参考博客
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
为什么要学数据结构?
一、前言 在可视化化程序设计的今天,借助于集成开发环境可以很快地生成程序,程序设计不再是计算机专业人员的专利。很多人认为,只要掌握几种开发工具就可以成为编程高手,其实,这是一种误解。要想成为一个专业的开发人员,至少需要以下三个条件: 1) 能够熟练地选择和设计各种数据结构和算法 2) 至少要能够熟练地掌握一门程序设计语言 3) 熟知所涉及的相关应用领域的知识 其中,后两个条件比较容易实现,而第一个...
Android 9.0 init 启动流程
阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:一、启动流程概述一、 启动流程概述Android启动流程跟Linux启动类似,大致分为如下五个阶段。1.开机上电,加载固化的ROM。2.加载BootLoader,拉起Android OS。3.加载Uboot,初始外设,引导Kernel启动等。...
相关热词 c# 图片上传 c# gdi 占用内存 c#中遍历字典 c#控制台模拟dos c# 斜率 最小二乘法 c#进程延迟 c# mysql完整项目 c# grid 总行数 c# web浏览器插件 c# xml 生成xsd
立即提问