怎么用js获取table中的td里的控件值

怎么用js获取table中的td里的控件值,第1张

<script type="text/javascript">

function getVal()

{

var tab = documentgetElementById("tab");

var rows = tabrowslength;

for(var i = 1; i < rows; i++)

{

var cols = tabrows[i]childNodes;

for(var m = 0; m < colslength; m++)

{

alert(cols[m]innerText);

}

}

}

</script>

<table id="tab">

<tr>

<th>学号</th>

<th>姓名</th>

</tr>

<tr>

<td>001</td>

<td>隆美尔</td>

</tr>

<tr>

<td>002</td>

<td>希特勒</td>

</tr>

</table>

<input type="button" value="获取table值" onclick="getVal()"/>

两种方式

一种是引用一个jquery,使用jquery选择器,代码如下

$("table td #input的id")val();

其实可以直接

$("#id值")val();

另一种是js,你在input上边加一个id值

documentgetElementById("test")value;

根据多选框name来获得选中的值可用如下 jquery代码实现

$("input:checkbox[name='test']:checked")each(function() { // 遍历name=test的多选框

  $(this)val();  // 每一个被选中项的值

});

实例演示:给出两组多选框,点击按钮后分别获得两组中被选择的项目

示例代码如下

创建Html元素

<div class="box">

<span>请输入用户名,限定字母、数字或下划线的组合:</span><br>

<div class="content">

<span>水果:</span><br>

<input type="checkbox" name="fruit" value="梨子"/>梨子

<input type="checkbox" name="fruit" value="李子"/>李子

<input type="checkbox" name="fruit" value="栗子"/>栗子

<input type="checkbox" name="fruit" value="荔枝"/>荔枝<br>

<span>蔬菜:</span><br>

<input type="checkbox" name="vegetable" value="青菜"/>青菜

<input type="checkbox" name="vegetable" value="萝卜"/>萝卜

<input type="checkbox" name="vegetable" value="土豆"/>土豆

<input type="checkbox" name="vegetable" value="茄子"/>茄子

</div>

<input type="button" value="提交">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='checkbox']{margin:5px;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

$(function(){

// 设置属性值

$("input:button")click(function() {

var fruit = "";

var vegetable = "";

$("input:checkbox[name='fruit']:checked")each(function() {

fruit += $(this)val() + " ";

});

$("input:checkbox[name='vegetable']:checked")each(function() {

vegetable += $(this)val() + " ";

});

alert("已选择水果:"+fruit+",已选择蔬菜:"+vegetable);

});

})

观察效果

js获取表格中每行的td元素方法:

<script>

var tb = documentgetElementById("tb");  //根据id找到这个表格

    var rows = tbrows;               //取得这个table下的所有行

    for(var i=0;i<rowslength;i++)//循环遍历所有的tr行

    {

      for(var j=0;j<rows[i]cellslength;j++)//取得第几行下面的td个数,再次循环遍历该行下面的td元素

      {

         var cell = rows[i]cells[j];//获取某行下面的某个td元素

       alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cellinnerHTML);//cellinnerHTML获取元素里头的值  

}

}

</script>

拓展使用jq几行命令就能实现获取td的值

$("#tb tr td")each(function(i, v){    //针对tb表格下的所有td进行遍历

        alert("第"+(i + 1)+"格的数字是"+$(this)text());//返回当前td下的值

})

以上就是关于怎么用js获取table中的td里的控件值全部的内容,包括:怎么用js获取table中的td里的控件值、如何用js取得table中td里面input的id或者name名称中指定的内容、jquery如何根据多选框name来获得选中的值。等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9633382.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存