用jquery读取table的某一行

我的代码如下：<html><head><title>Index</title><!--新Bootstrap核心CSS文件--><linkrel="stylesheet"h... 我的代码如下：

<html>
<head>
<title>Index</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>

<table class="table table-striped table-bordered table-hover" >
<thead>
<tr>
<td>输入框</td>
<td>选择框</td>
<td>读取</td>
</tr>
</thead>

<tbody>
<tr>
<td>
<input type=text" />
</td>
<td>
<select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
<td>
<input type="button" value='读取' />
</td>
</tr>
<tr>
<td>
<input type=text" />
</td>
<td>
<select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
<td>
<input type="button" value='读取' />
</td>
</tr>
<tr>
<td>
<input type=text" />
</td>
<td>
<select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</td>
<td>
<input type="button" value='读取' />
</td>
</tr>
</tbody>
</table>

</body>
</html>

我想实现的功能是：
按了某个读取按钮，就可以把这一行的 <input> 以及 <select> 内容 alert 出来，

我的难题在于，上面代码的 <input>和<select>都没有id ， 我不清楚怎么用jquery的选择器选出某一行的内容。。

菜鸟学生求助各路大神，刚刚接触js不太清楚 展开
 我来答
6个回答
#合辑# 机票是越早买越便宜吗？
ouyangqunli101
2014-12-31 · TA获得超过667个赞
知道小有建树答主
回答量：421
采纳率：100%
帮助的人：187万
我也去答题访问个人页
展开全部

已经写好，亲测可用

<html>
<head>
<meta charset="utf-8">
    <title>Index</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<script>
    $(function(){
		$("input[type=button]").click(function(){
			var inputObj   = $(this).parents("tr").find('input:first');
			var selectObj  = $(this).parents("tr").find('select');
			alert("text的值："+inputObj.val()+"   select的值："+selectObj.val());	
		})	
	})
    </script>
</head>
<body>

    <table class="table table-striped table-bordered table-hover" >
        <thead> 
            <tr>
                <td>输入框</td>
                <td>选择框</td>
                <td>读取</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <select>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                    </select>
                </td>
                <td>
                    <input  type="button" value='读取' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <select>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                    </select>
                </td>
                <td>
                    <input  type="button" value='读取' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <select>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                    </select>
                </td>
                <td>
                    <input  type="button" value='读取' />
                </td>
            </tr>
        </tbody>
    </table>

</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
2014-12-31
展开全部
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
$ (':button[value="读取"]').click (function ()
{
var me = $ (this);
var tr = me.closest ('tr');
var input = tr.find(':text');
var select = tr.find('select');
});
});
</script>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td>输入框</td>
<td>选择框</td>
<td>读取</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></td>
<td><input type="button" value='读取' /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></td>
<td><input type="button" value='读取' /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><select>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select></td>
<td><input type="button" value='读取' /></td>
</tr>
</tbody>
</table>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友46b235f5b2
2014-12-31 · TA获得超过1397个赞
知道小有建树答主
回答量：676
采纳率：100%
帮助的人：628万
我也去答题访问个人页
展开全部 
$(function(){
            $(':button').click(function(){
               var values = $(this).parent().prevAll().map(function(i,v){
                    return $(this).children().val();
                }).get().join(',');
               alert(values);
               
               //or...
               var o = {};
               $(this).parent().prevAll().each(function(i,v){
                    o[$(this).children()[0].tagName.toLowerCase()]=$(this).children().val();
                });
               console.info(o);
            })
        })
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
二牛资讯
2014-12-31 · TA获得超过736个赞
知道小有建树答主
回答量：631
采纳率：50%
帮助的人：565万
我也去答题访问个人页
展开全部
jquery 写法很简单:
$(":button").click(function(){
var p = $(this).parent().parent();
var selectvalue = p.find("select").val();

var textvalue = p.find(":text").val();

alert("input的值是：" + textvalue + ".\r\nselect的值是：" + selectvalue);

})
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
明飞兰3B
2014-12-31 · TA获得超过548个赞
知道小有建树答主
回答量：535
采纳率：55%
帮助的人：263万
我也去答题访问个人页
展开全部

http://jsfiddle.net/cwtmg91z/

使用父子关系，兄弟关系定位到相关td 这样的代码对于html结构耦合很高

$(".table").on("click", "input[type='button']", function () {
    var $siblings = $(this).parents('tr').find("td");
    var inputText = $siblings.eq(0).find("input[type='text']").eq(0).val();
    var selectText = $siblings.eq(1).find("select").eq(0).val();
    alert(inputText );
    alert(selectText);
});
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（4）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式