table 添加 tr 的点击事件

深藏阁楼爱情的钟 2022-05-20 10:12 822阅读 0赞

在<table表格中为每一个<tr添加一个点击或双击事件，并传参数：

方法传参可以通过直接传参，也可以通过对象传参：如下：

HTML代码：

<table id="contentTable" class="table table-bordered table-condensed">
       <thead>
          <tr> 
             <th>状态</th>
                <th>档案编号</th>
                <th>客户姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机号码</th>
          </tr>
       </thead>
       <tbody>
       <c:forEach items="${page}" var="customer" varStatus="custIndex">
          <tr id ='id_${custIndex.index}' onclick="setCustomerNumber('${custIndex.index}','${customer.customerNumber}',this)" ondblclick="selectCustomerDb(this)">
           
             <td>
                <span>
                   ${fns:getDictLabel(customer.perfectStatus,'perfect_status' ,'' ) }
                </span>
             </td>
             <td>
                <a href="${ctx}/cust/customer/custArchives?customerNumber=${customer.customerNumber}
                &archivesId=${customer.archivesId}&perfectStatus=${customer.perfectStatus}&flagId=${customer.flagId}">
                      ${customer.treatmentArchivesNumber}
                </a>
             </td>
             <td>
                ${customer.customerName}
             </td>
             <td>
                ${fns:getDictLabel(customer.sex,"sex" ,'' ) }
             </td>
             <td>
                ${customer.age}
             </td>
             <td>
                ${fns:encodeMobile(customer.mobile)}
             </td>
          </tr>
       </c:forEach>
       </tbody>
    </table>

JS：

//单击事件（左击）

function setCustomerNumber（index，customerNumber，tr）\{  
  // tr.cells \[0\]：获取当前行中的第一列，  
// tr.cells \[0\] .childNodes \[1\] .innerHTML：获取当前行中间span标签中的值trim（ ）：去空  
var status = tr.cells \[0\] .childNodes \[1\] .innerHTML.trim（）;

var name = tr.cells \[2\] .innerHTML.trim（）; //获取当前行的客户姓名  
\}

//双击事件

function selectCustomerDb(tr) {
    
    }