JS为表格每行添加点击事件

JS为表格每行添加点击事件,第1张

很举灶态简单;辩中不用修改html页面

js如下

window.onload=init;正源

function init(){

var trs=documents.getElmentsByTagName('TR')

for(var i=0i<trs.lengthi++)

trs[i].onclick=doclick

}

function doclick(){

alert(this.innerHTML)

}

<span style="font-family:'Times New Roman'font-size:18px">$table.bootstrapTable({

//url: 'json/dev.json',

data: wcssdata,

toolbar: '#toolbar', //工具按钮用哪个容器

//striped: true, //是否显示行间隔色

cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

pagination: true, //是否显示分页

sortable: true, //是否启用排序

sortOrder: "asc", //排序方式

//queryParams: postQueryParams,//传递参数(敏稿陵*)

//sidePagination: "server",      //分页方式:client客户端分页,server服务端分页(*)

pageSize: 20, //每页的记录行数(*)

pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)

strictSearch: true,

//height: table_h, //行高,如果没有设置height属性,表格自动根据记录条数觉得桥戚表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变,且颜色也不会改变????

uniqueId: "id", //每一行的唯一标识,一般为主键列

cardView: false, //是否显示详细视图

detailView: false, //是否显示父子表

paginationHAlign: "left",

singleSelect: true,

//search:true,               //是否显示表格搜索,此搜索是客户端搜索,不会进服务端

//strictSearch: true,

//showColumns: true, //是否显示所有的列

//showRefresh: true, //是否显示刷新按钮

clickToSelect: true, //是否启用点击选中行

paginationPreText: "<<",

paginationNextText: ">>",

columns: [{

checkbox: true,

}, {

field: 'id',

title: '序号',

width: "75px",

}, {

field: 'seq_no',

title: '编号',

}, {

field: 'type',

title: '类型',

}, {

field: 'position',

title: '位置',

}, {

field: 'status',

title: '设备状态',

}, {

field: 'fault',

title: '故障现象',

}, {

field: 'purchase_time',

title: '采购时间',

}, {

field: 'quality_time',

title: '出保时间',

}, {

field: 'maintain_unit',

title: '维护单位',

}, {

field: 'inputer',

title: '录入者',

}, {

field: 'operate',

title: ' *** 作',

width: '80px',

events: operateEvents1,

formatter: operateFormatter

}, ],

/*处理json数据需要配置此项

* responseHandler: function (res) {

return res.rows

}*/

})</span>

<span style="font-family:'Times New Roman'font-size:18px">敬旦window.operateEvents1 = {

'click .RoleOfA': function(e, value, row, index) {

detailmodal.open()

$("#dev_id").val(row.id)

$("#seq_no").val(row.seq_no)

$("#dev_pos").val(row.position)

$("#dev_type1").val(row.type)

$("#dev_status").val(row.status)

$("#fault").val(row.fault)

$("#buy_time").val(row.purchase_time)

$("#quality_time").val(row.quality_time)

$("#inputer").val(row.inputer)

$("#maintain_unit").val(row.maintain_unit)

for(var i in row) console.log(i)

}

}

function operateFormatter(value, row, index) {

return [

'<button id="btn_detail" type="button" class="RoleOfA btn-default bt-select">详情</button>',

].join('')

}</span>

<html>

<head>

<title>添加行</title>

<script type="text/javascript">

function addRow() {

var tb = document.getElementById("tb")

var length = tb.rows.length//该表格的总行数

var row = tb.insertRow(length)//在行末尾添加一行

row.ondblclick = function () { altRowNum1(row)} //为行添加双击事件

var c1 = row.insertCell(0)//添加单元格

c1.innerHTML = length + 1

var c2 = row.insertCell(1)

c2.innerHTML = '<input type="text" />'

var c3 = row.insertCell(2)

c3.innerHTML = '<input type="button" onclick="altRowNum2(this)" value="当前行"/>'

}

function altRowNum1(row) {

var rowIndex = row.rowIndex//行号

alert("行双击,这是第 " + (rowIndex + 1) + " 行,行下标为 " + rowIndex)

}

function altRowNum2(btn) {

var rowIndex = btn.parentNode.parentNode.rowIndex//btn的父节点为单元格,单元格的父节点当前行

alert("单元格按钮单击,这是第 " + (rowIndex + 1) + " 行,行下标为 " + rowIndex)

}

</script>

</head>

<亏型body>

<input type="button" value="添加" onclick="addRow()"/><br/>

<table id="tb" width="200px" border="1px" >

<tr ondblclick="altRowNum1(this)"><td>1</td><td><input type="text" value="60"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>2</td><td><input type="text" value="67"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>3</td><td><销桥猜input type="text" value="59"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>4</td><td><input type="text" value="70"/></td><消薯td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>5</td><td><input type="text" value="80"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>6</td><td><input type="text" value="90"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>7</td><td><input type="text" value="hh"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>8</td><td><input type="text" value="98"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>9</td><td><input type="text" value="99"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

<tr ondblclick="altRowNum1(this)"><td>10</td><td><input type="text" value="100"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>

</table>

<div id="resultDiv">

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/bake/11994884.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存