html5-表格行的单击事件为何不生效？—

表格行的单击事件为何不生效？

<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标签也不应该不生效吧，大佬们帮忙看看是怎么回事，万分感谢。

编辑于：2019.06.11 20:55 发布于：2019.06.11 20:45

| 评论0 | 收藏 | 浏览219 |

: Java首席劝退师

声望： 2

2个回答

按赞数排序

替换表格内容后要重新注册事件，你注册的这个点击事件是被替换掉的dom，新增的dom没有注册事件，所以点击无效
js部分写成这样应该就可以了。
至于多了个tbody，是由于你没有按照规范写，浏览器自动加上tbody了，表格格式：

<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>");

        $("tr").click(function(){
            alert('123');
            $("tr").removeClass("tr-click");
            $(this).addClass("tr-click");
        })
    })
})

</script>

发布于：2019.06.11 21:47

评论 2 |

| 已采纳

: Print_v

声望： 25

: Java首席劝退师 谢谢大佬解惑; 3 个月之前回复

: Print_v 表格格式那部分可以忽略。。。。。没写上去; 3 个月之前回复

你用replaceWith（）等于是重新创建一个表格来替换原来的表格。
你的单击事件是设置在原来的表格上的，新创建的表格没有设置事件。

解决方法是replaceWith（）替换表格之后重新对新创建的表格设置事件。
或者用委托事件的绑定方法，把单击事件委托给表格的父元素，如：

$(".table").parent().on("click", "tr",function(){
alert('123');
$("tr").removeClass("tr-click");
$(this).addClass("tr-click");
})

发布于：2019.06.11 22:00

评论 2 |

: 天际的海浪

声望： 2784

: Java首席劝退师 谢谢大佬解惑; 3 个月之前回复

: 贵阳老马马善福专门编写代码的老马就是我！ 正解; 3 个月之前回复

: 插入链接

本地上传网络图片

上传中...

浏览

上传图片

插入图片

其他相关推荐

表格行的单击事件不生效: rnrn rn rn 123rn 123rn 123rn rn rn 123rn 123rn 123rn rn rnrn 改变表格rnrn rnrn rnrn如代码建一个表格，为表格的行设置单击事件，更换背景色，此时单击事件正常。rn同时设置一个按钮，通过按钮单击事件使用replaceWith方法替换表格内容，这个时候表格行的单击事件不生效了。rn百思不得其解，在浏览器查看了源代码，发现多了标签，但是我设置的单击事件选择器是 tr ,就算多了tbody标签也不应该不生效吧，大佬们帮忙看看是怎么回事，万分感谢。

下面的为何不生效？: rn

新建的组策略为何不生效: 我在一台Domain Controller上建了一个Domain.并在Domain下建了一个OU为SUN, OU下有三个子OU.rn在SUN这个OU上我新建了一个Group Policy, 并设置了一个控制权限，如禁用IE首页设置等。并且我将相关的电脑都移到了Sun这个OU下，而域号分别放到各个子OU下。rn我从工作站上用这些域帐号登录后，设置的组策略没起一点作用。rnrn不要告诉我说组策略要90分钟才起作用。我隔了几天再试都一样。rn

GridLayout排序为何不生效？？？: 程序已经编译成功，但是排序效果没有生效~以下是排序的相关代码：rn[img=http://hi.csdn.net/attachment/201007/15/5989796_1279180815sas1.jpg][/img]rnrn layout = new QGridLayout(this);rn layout->addWidget(x_Label,0,0);rn layout->addWidget(xLabel,0,1);rn layout->addWidget(y_Label,1,0);rn layout->addWidget(yLabel,1,1);rn layout->addWidget(frameGeometry_Label,2,0);rn layout->addWidget(frameGeometryLabel,2,1);rn layout->addWidget(pos_Label,3,0);rn layout->addWidget(posLabel,3,1);rn layout->addWidget(geometry_Label,4,0);rn layout->addWidget(geometryLabel,4,1);rn layout->addWidget(width_Label,5,0);rn layout->addWidget(widthLabel,5,1);rn layout->addWidget(height_Label,6,0);rn layout->addWidget(heightLabel,6,1);rn layout->addWidget(rect_Label,7,0);rn layout->addWidget(rectLabel,7,1);rn layout->addWidget(size_Label,8,0);rn layout->addWidget(sizeLabel,8,1);rn layout->setMargin(15);rn layout->setSpacing(10);

表格为何不显示数据？: 我的表单上放置了一个页框，页框的一个页面上放置了表格，我用数据环境将其和表绑定，但表格中却无数据显示，请问专家是何原因？

请问这个if代码为何不生效？: 前端代码：rn[code=html]rnrn rn $vo.itemrn rn rn[/code]rnrn请问这个if代码为何不生效？rnrn这样也不行：rn[code=html]rnrn rn checked > $vo.itemrn rn rn[/code]rnrn后台测试这样是有输出 ”checked“ 的：rn[code=php]rnif(in_array($list[0]['code'], $codes)) echo " checked"; rn[/code]rnrn$codes是个数组，里面存了几个code。rnrn咋回事呢？请不吝赐教！

echarts富文本如何使用，为何不生效: echarts 出了一个新功能，富文本样式，可以给任意显示出来的数据自定义样式，在官网的配置项中已经写得很明确了，如下图所示，大括号中的 a 对应的是富文本样式的 a 类，但是使用的过程中，有时候会发现，虽然不报错，但是样式就是不生效，解决办法：下载一版最新的 echarts 包，因为老的版本不支持该功能。 ...

displayTag单击事件，displaytag表格单击事件: [code="jsp"] ${bm.customerName} [/code]

html js表格行颜色不生效: 原因bgColor 写成 bgcolor 且浏览器并未报错 <script> function init(){ var tab=document.getElementById("tbl"); var row=tab.rows; for(var i=1;i<row.length;i++){ var row2=row[i]; if(...

表头居中，表格为何不居中？: rn rn 123 rn 456 rn 789 rn abc rn rnrnrn rn rn 1rn rn 4rn rn 7rn rn arn rn rn rn 2rn rn 5rn rn 8rn rn brn rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rn rn 3 rn rn 6 rn rn 9 rn rn c rn rnrn rn谢谢！

GridView行单击事件: 在GridView中单击某一行,此时会弹出(或跳转)新页面,根据该行商品的ID展现具体商品信息.rn请问怎么实现

Gridview行单击事件: 当单击行时，如果此行的ID为奇数，则button1.visiable=false;否则为true，怎么处理呢

jquery之数据表-行单击事件: 下面介绍一下query插件dataTable行单击事件的用法： //行单击事件 $('example tbody').on('click','tr',function(){ var element = "input[name='checkbox1']:eq("+(this.rowIndex-1+")";//设置需获取得行元素 if($(element).is(":focus")){//获取已获...

Layui监听行单击事件: Layui监听行单击事件 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 作者：黄海浪撰写时间：2019年6月5日 ~~~~~~~~~~~~~~~~~~...

关于DataGrid的行单击事件: SelectionChanged事件虽然能满足大部分的需求，但有一种情况没法处理，就是同一行第二次点击的时候不会触发rn那么，请问WPF还有其他更适合的事件来模拟行单击操作吗？

displayTags表格绑定单击事件: 因为要单击每行然后将信息显示在相应文本框中，但是displaytags标签貌似只有列column，有没有用过的？帮帮忙吧。。自己搞项目确实好悲催的。。好多东西都不知道该用什么。。o(︶︿︶)o

简单!怎样禁止checkbox响应表格行的onclick事件?表格行有一个单击事件,如:: 简单!怎样禁止checkbox响应表格行的onclick事件?rn表格行有一个单击事件,如:rnrnrnaaaaaaarnbbbbbbbrncccccccrnrn点击其它单元格时都会弹出“你好”rn但是当单击checkbox时不让弹出这个警告框?rnrn

☆☆☆菜鸟请教：一个按钮美化派生类为何不生效？☆☆☆: 从别人的程序中拷贝了BaseButton.cpp和BaseButton.h文件，并添加到工程中，主要内容如下：rn#include "stdafx.h"rn#include "BaseButton.h"rnrn#ifdef _DEBUGrn#define new DEBUG_NEWrn#undef THIS_FILErnstatic char THIS_FILE[] = __FILE__;rn#endifrnrn/////////////////////////////////////////////////////////////////////////////rn// CBaseButtonrn//,UINT EnablePicrnCBaseButton::CBaseButton(UINT NomalPic,UINT MovePic,UINT DownPic)rnrn m_DownPic=DownPic;rn m_NomalPic=NomalPic;rn// m_EnablePic=EnablePic;rn m_MovePic=MovePic;rn m_IsInRect=false;rnrnrnCBaseButton::~CBaseButton()rnrnrnrnrnrnBEGIN_MESSAGE_MAP(CBaseButton, CButton)rn //AFX_MSG_MAP(CBaseButton)rn ON_WM_TIMER()rn //AFX_MSG_MAPrnEND_MESSAGE_MAP()rnrn/////////////////////////////////////////////////////////////////////////////rn// CBaseButton message handlersrnrnbool CBaseButton::Drawit(CDC *pDC, UINT ResID)rnrn CDC memDC;rn memDC.CreateCompatibleDC(pDC);rn CBitmap bitmap;rn BITMAP bitStruct;rn bitmap.LoadBitmap(ResID);rn bitmap.GetBitmap(&bitStruct);rn memDC.SelectObject(&bitmap);rn pDC->BitBlt(0,0,bitStruct.bmWidth,bitStruct.bmHeight,&memDC,0,0,SRCCOPY);rn memDC.DeleteDC();rn bitmap.DeleteObject();rn return true;rnrnrnrnvoid CBaseButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct) rnrn CDC* pDC;rn pDC=CDC::FromHandle(lpDrawItemStruct->hDC);rn UINT state=lpDrawItemStruct->itemState;rn CRect focRect,rect=lpDrawItemStruct->rcItem;rnrn focRect.left = rect.left + 3;rn focRect.right = rect.right - 3;rn focRect.top = rect.top + 3;rn focRect.bottom = rect.bottom - 3;rn //写按钮文本rn pDC->SetBkMode(TRANSPARENT);rn CString sCaption;rn this->GetWindowText(sCaption);rn if(state&ODS_SELECTED)rn rn Drawit(pDC,m_DownPic);rn pDC->SetTextColor(RGB(159,191,223));rn rn elsern rn if(m_IsInRect==true)rn rn Drawit(pDC,m_MovePic);rn pDC->SetTextColor(RGB(255,100,100));rn rn elsern rn Drawit(pDC,m_NomalPic);rn pDC->SetTextColor(RGB(255,255,155));rn rn rn if(state&ODS_FOCUS)rn rn pDC->DrawFocusRect(&focRect);rn lpDrawItemStruct->itemAction=ODA_FOCUS ;rn rn/* if(state&ODS_DISABLED)rn rn Drawit(pDC,m_EnablePic);rn pDC->SetTextColor(RGB(96,96,96));rn */rn rn pDC->DrawText(sCaption,rect,DT_CENTER|DT_VCENTER|DT_SINGLELINE);rnrnrnrnrnBOOL CBaseButton::PreTranslateMessage(MSG* pMsg) rnrnrn if(pMsg->hwnd==this->GetSafeHwnd()&&pMsg->message==WM_KEYDOWN && pMsg->wParam==13)rn rn pMsg->lParam = 589857;rn pMsg->message = WM_LBUTTONDOWN;rn rn if(pMsg->hwnd==this->GetSafeHwnd()&&pMsg->message==WM_KEYUP && pMsg->wParam==13)rn rn pMsg->lParam = 589857;rn pMsg->message = WM_LBUTTONUP;rn rn return CButton::PreTranslateMessage(pMsg);rnrnrnvoid CBaseButton::OnTimer(UINT nIDEvent) rnrn CPoint point;rn GetCursorPos(&point);rn CRect rcWnd;rn this->GetWindowRect(&rcWnd);rn if(rcWnd.PtInRect(point))rn rn if(m_IsInRect==true)rn goto END;rn elsern rn m_IsInRect=true;rn this->Invalidate();rn rn rn elsern rn if(m_IsInRect==false)rn goto END;rn elsern rn this->Invalidate();rn m_IsInRect=false;rn rn rnEND: CButton::OnTimer(nIDEvent);rnrnrnvoid CBaseButton::PreSubclassWindow() rnrn this->SetTimer(1,10,NULL);rn CButton::PreSubclassWindow();rnrnrn接下来，加入了三个位图文件，分别是鼠标移动、在上面、按下时的图片，之后声明了程序中两个按钮变量为美化的按钮类，也能够运行起来了，但我的按钮根本就没有特殊的效果，还是原来的老样子。请问还有什么地方需要配置的？rn

atl::Cwindow里调用SetTimer为何不生效？: atl::Cwindow里调用SetTimer为何不生效？rn我在一个atl工程里有一个window从atl::Cwindow继承，我在OnCreate里调用SetTimer，返回值是对的，但是就是不进OnTimer函数，我试了一个全局的函数，也是不行，为何啊，贴一下代码rnrnLRESULT CMainWindow::OnCreate(UINT /*uMsg*/, WPARAM /*wParam*/, LPARAM /*lParam*/, BOOL& /*bHandled*/)rnrn HRESULT hr = S_OK;rnrn UINT i = SetTimer(1,3000,TimeOut);rnrn ASSERT(SUCCEEDED(hr));rnError:rn return SUCCEEDED(hr) ? 0 : -1;rnrnrnLRESULT CMainWindow::OnTimer(UINT /*uMsg*/, WPARAM /*wParam*/, LPARAM /*lParam*/, BOOL& /*bHandled*/)rnrn m_bSplashing = FALSE;rn InitBrowser();rn KillTimer(1);rn return 0;rnrnrnvoid TimeOut( HWND hwnd,rn UINT uMsg,rn UINT_PTR idEvent,rn DWORD dwTime)rnrn ::NKDbgPrintfW(L"OnTimer \r\n");rnrnrn谢谢！

.NET 使用Oracle数据库连接池参数为何不生效？: 环境： rnAPP：.net IIS 6.0 (OS:WIN 2003) rn数据库：Oracle 9i rn网站并发在线操作用户：1100左右。 rn数据库连接字符串（Web.config文件）: rn rn现象：从oracle数据库管理器观察，来自网站的连接会话非常多，业务高峰期时，状态为active的会话平均4个，而状态为INACTIVE的会话数量保持110左右，并且持续3个小时没有太大变化。 rn rn问题：按照我在Web.config文件中的设置，连接的生命期为120秒，每次释放超过生命期的连接会话应该在10个，可是为什么看不到这样的变化呢，还有好多连接会话都超过1个小时了，都没有释放。 rn我的连接池参数为什么没有生效呢？

asp:Button的BackColor在IOS上为何不生效？: rn 金额(元)rn 笔数rn rn rn rn rn rn <%=TotalMoney %>rn <%=TotalCount %>rn rn rn rn rnrn以上代码是一个table的两行（table上没有设置样式），第一行的Button的颜色（蓝色）显示正确，但是第二行的Button的颜色（橙色）在IOS手机上一直不生效（不管换成什么颜色都不生效，一直跟第一行的Button的颜色一样），不知道I什么原因导致这个问题，请大神帮忙看看，谢谢

vue prop传值default属性如何使用，为何不生效？: 如果在template中，显示的调用了 prop 属性，那么 default 属性就不会生效如果在template中，不调用 prop 属性，default 就会生效 default 值有效与否，和 prop 的验证通不通过，没有关系 //声明 Vue.component("blog-post", { props: { postTitle: { type: Numbe...

GridView行单击事件改变行颜色: 需求就是GridView单击任意位置时选中鼠标所在行,改变行颜色,单击另一行的时候,恢复上一次选中行的颜色,并使另一行变色.rnPs:是单击变色...不是停留..

为textbox添加单击事件: rn rn rn codebehind: rn rn private void Page_Load(object sender, System.EventArgs e) rn rn this.TextBox1.Attributes.Add("onlick",this.Button1.ClientID+".click()"); rn rn rn private void Button1_Click(object sender, System.EventArgs e) rn rn ……//Your code at server rn

给GridView行添加单击事件: 将行的单击事件传递个服务器控件执行： [code="Asp.Net"]protected void ParentGridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowIndex >= 0 ) { ...

关于GridView的行单击事件请教: 我想单击GridView里的行，然后把数据取出来，可是单击事件，应该怎么写哇？请高手指点~`~（急）rn我在网上找了好多都是写JS的方法，还有没有别的方法呢？

怎样添加DataGrid 行单击事件: 我想具体实现如下功能：rn页面上有一个DataGridrn在DataGrid下方有一区域 A 显示详细信息rn如何添加 DataGrid 行后台单击事件 rn点击 DataGrid 一行时触发事件rn区域 A 就显示这一行的详细信息？？

使用jQuery为表格添加合计行: 使用jQuery为表格添加合计行，方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名

[学习笔记]easyui 为表格行添加事件: 1.0的验收老师提到最多的是：无处不按钮，无处不入口。在后面的开发中牢记了这个思想，行动下移。比如对表格的操作，不能只限于工具栏上的按钮，选中一条数据后需得选按钮，索性不给它设计工具栏，点击哪里都是按钮。 1.html 这是一个编辑试卷的功能，页面中首先显示试卷的题型，然后点击题型可以进入到题目列表页。 data-options="rownumbers:true,pagination

jQuery为表格行添加背景色: .odd { background-color:#ffc;/*奇数行背景色-浅黄色*/ } .even { background-color:#cef;/*偶数行背景色-浅蓝色*/ } $().ready(function(){ $('tr:odd').addClass('odd'); $('tr:even').addClass('even'); });注：:eq

修改注册表后如何不重启生效: 不通过杀死explorer进程，有什么方法可以达到目的？

如何不重启tomcat就使 bean 生效？: 我改动了javaBean，重新编译后，为什么必须重启tomcat后才生效？有没有办法不重启就可以使javabean生效？

如何不重启使修改的注册表生效？: procedure TForm1.SpeedButton3Click(Sender: TObject);rnvarrnmyreg:TRegistry;rnmyval:string;rnbeginrn myval:='192.168.0.3';rn myreg:=TRegistry.Create;rn with myreg dorn beginrn rootkey:=HKEY_LOCAL_MACHINE;rn if openkey('System\CurrentControlSet\Services\Class\NetTrans\0002',true) thenrn WriteString('DefaultGateway',myval);rn myreg.CloseKey;rn myreg.Free;rn showmessage('线路变换成功！谢谢使用！')rn end;rnend;rnrnrnrn那位大虾能帮帮忙！十分感谢！

如何不重启让环境变量生效: 只需要一行代码：添加完环境变量后，执行一下 1 $ set %PATH% = c 关闭当前的 cmd 从新打开，就可以看到了 echo %PATH%

宽带为何不宽: 刚装adsl,可打开页面的速度与modem没两样,哪位仁兄能给个建议

job为何不工作？: SQL Server2000中的作业为何突然不执行了？而且也不能够察看属性和修改调度时间，后来，重新安装了一遍SQL Server2000，就可以了，不知道这是什么原因，SQL Server2000怎么会突然自己坏了呢？

OWA为何不能用？: 如何启用OWA？ex2000刚装好。

win+r为何不能用？: WindowsXp，键盘win+r，结果运行窗口总是一闪而过不能停留。现在更好，每次win+r，系统提示“此次操作由于本系统限制而取消，请联系系统管理员”。如何解决？谢谢！

为何不变色？: <%rn int times = 10;rn%>rnrnrn<%rn for(int i = 0; i < times; i++)rn out.print("" );rn out.print(times+ " " );rn rn rn out.print("效果不好，没有变颜色。。。" );rn%>rnrn这两段是书上抄下来的代码，rnrn按道理应该会每次都变色的，可是实际上都是黑的，rnrn望高手指教^_^

为何不更新数据？: 我的程序需要更新数据库记录update table set 。。。rn用odbc连接，在本机运行可以，客户端是oracle8。1。6rn而在另一台客户端是oracle8。0。5上执行，记录得不到更新。请问为什么？rn后台是同一台数据库oracle8。0。5。着急呀！否则，每天我都要干活了。