关于table 点击行获取当前行的某一个列元素
2013-05-28 14:35
155 查看
<table>
<tr onclick="onClickIp(this)">
<td><input name="text" type="text" class="position" id="1" readonly></td>
<td><input name="text2" type="text" class="ip" id="1a" readonly></td>
<td><input name="text2" type="text" class="number" id="1b" value="1024:1024" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="2" readonly ></td>
<td><input name="text2" type="text" class="ip" id="2a" readonly></td>
<td><input name="text2" type="text" class="number" id="1b" value="****:****" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="3" readonly ></td>
<td><input name="text2" type="text" class="ip" id="3a" readonly></td>
<td><input name="text2" type="text" class="number" id="3b" value="****:****" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="4"></td>
<td><input name="text2" type="text" class="ip" id="4a"></td>
<td><input name="text2" type="text" class="number" id="4b" value="****:****">
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</td>
</tr>
</table>
function onClickIp(obj)
{//
u = id = "";
u = obj.cells[1].childNodes[0].value;
id = obj.cells[2].childNodes[0].id;
id = parseInt(id) +"b";
alert(u+"\t\n"+id);
}
使用div实现类似table的几行几列,获取当前行的代码为:
<div id="headTable">
<div>
function onLoad()
{//Dom添加div
var div=document.getElementById("headTable");
for(var i=0;i<3;i++)
{var newdiv=document.createElement('div');
var text1=document.createElement('div');
var text2=document.createElement('div');
var text3=document.createElement('div');
var text4=document.createElement('div');
newdiv.onclick=onClickIp;
div.appendChild(newdiv);
newdiv.appendChild(text1);
newdiv.appendChild(text2);
newdiv.appendChild(text3);
newdiv.appendChild(text4);
text1.setAttribute("className","div_in_1");
text2.setAttribute("className","div_in_2");
text3.setAttribute("className","div_in_3");
text1.value=text1.innerHTML="0-1";
text2.value=text2.innerHTML="192.48.5.55";
text3.id="1b";
text3.value=text3.innerHTML="****:****";
}
}
function onClickIp()
{
var u,id;
u = id = "";
u = this.childNodes[1].value;
id = this.childNodes[2].id;
alert(u+"\t\n"+id);
}
<tr onclick="onClickIp(this)">
<td><input name="text" type="text" class="position" id="1" readonly></td>
<td><input name="text2" type="text" class="ip" id="1a" readonly></td>
<td><input name="text2" type="text" class="number" id="1b" value="1024:1024" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="2" readonly ></td>
<td><input name="text2" type="text" class="ip" id="2a" readonly></td>
<td><input name="text2" type="text" class="number" id="1b" value="****:****" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="3" readonly ></td>
<td><input name="text2" type="text" class="ip" id="3a" readonly></td>
<td><input name="text2" type="text" class="number" id="3b" value="****:****" readonly></td>
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</tr>
<tr onclick="onClickIp(this)">
<td><input name="text2" type="text" class="position" id="4"></td>
<td><input name="text2" type="text" class="ip" id="4a"></td>
<td><input name="text2" type="text" class="number" id="4b" value="****:****">
<td><input name="text2" type="text" class="yuliu" id="1c"> </td>
</td>
</tr>
</table>
function onClickIp(obj)
{//
u = id = "";
u = obj.cells[1].childNodes[0].value;
id = obj.cells[2].childNodes[0].id;
id = parseInt(id) +"b";
alert(u+"\t\n"+id);
}
使用div实现类似table的几行几列,获取当前行的代码为:
<div id="headTable">
<div>
function onLoad()
{//Dom添加div
var div=document.getElementById("headTable");
for(var i=0;i<3;i++)
{var newdiv=document.createElement('div');
var text1=document.createElement('div');
var text2=document.createElement('div');
var text3=document.createElement('div');
var text4=document.createElement('div');
newdiv.onclick=onClickIp;
div.appendChild(newdiv);
newdiv.appendChild(text1);
newdiv.appendChild(text2);
newdiv.appendChild(text3);
newdiv.appendChild(text4);
text1.setAttribute("className","div_in_1");
text2.setAttribute("className","div_in_2");
text3.setAttribute("className","div_in_3");
text1.value=text1.innerHTML="0-1";
text2.value=text2.innerHTML="192.48.5.55";
text3.id="1b";
text3.value=text3.innerHTML="****:****";
}
}
function onClickIp()
{
var u,id;
u = id = "";
u = this.childNodes[1].value;
id = this.childNodes[2].id;
alert(u+"\t\n"+id);
}
相关文章推荐
- 一个JavaScript获取元素当前高度的实例
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性
- 【笔记】js获取当前点击元素的索引
- JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
- 无法更新 EntitySet“SoreInfo_Table”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> 元素中没有支持当前操(转)
- 关于使用Jquery Ajax点击checkbox 获取数据库 实现刷新当前页面
- jQuery获取点击的当前行的第n列元素
- 自定义元素属性,以及用jquery 去获取当前点击的元素的这个自定义属性
- Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)
- jQuery获取当前点击的对象元素
- js jquery获取当前元素的兄弟级 上一个 下一个元素
- js jquery获取当前元素的兄弟级 上一个 下一个元素
- 每天一个JavaScript实例-获取元素当前高度
- jQuery获取当前点击的对象元素(实现代码)
- 关于listview getview()中 每个item中的按钮的 点击事件,获取当前item
- 获取当前点击的是哪个元素
- jquery获取html中当前元素对象,以及父对象,相邻的上一个对象,或下一个对象
- selenium之 一个不常用但又很有用的方法(switch_to.active_element),获取当前焦点元素
- selenium之 一个不常用但又很有用的方法(switch_to.active_element),获取当前焦点元素