javascript - 获取 jQuery 中选定行的特定元素值

Question

我有一个包含两行的表格，在每行的末尾有一个取消按钮，当我单击取消按钮时，它应该返回被单击行的特定列数据，但它总是返回第一行的值，我已经尝试过，但没有任何反应。我特别需要的是，假设我有一列隐藏的名为 Book Code 的列，如果用户单击取消按钮(从第一行开始)，它应该返回第一行的图书代码值，如果用户单击取消按钮(从第二行)它应该返回第二行的图书代码值。

这是我的代码示例:

HTML

<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableCell">CANCEL</div>
          <div class="divTableCell" >BOOKING #</div>
            <div class="divTableCell">ROUTE</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">SEAT #</div>
            <div class="divTableCell">DATE</div>
            <div class="divTableCell">TIME</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
      <div class="divTableRow">
      <div class="divTableCell1"><p onclick="cancel_reservation();"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">111</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">222222222</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell1"><p onclick="cancel_reservation();"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">aaaa</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">bbbb</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
    </div>
</div>

CSS

    .divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
        text-align:center;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
        text-align:center;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
        text-align:center;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

JAVASCRIPT

window.cancel_reservation = function() {

    alert("YES");
    var book_code_call = $("#book_code").text();
    var book_terminal_call = $("#book_terminal").text();
        alert(book_code_call);
        alert(book_terminal_call);

 }

知道如何实现我想要的吗？这是工作JSFIDDLE

Answer 1

第一

将其传递给点击函数中的参数

第二

使用.closest查找父行并比 .find函数查找您想要获取值的元素

请查找以下代码片段以了解更多信息...

window.cancel_reservation = function(e) {
		
  var book_code_call  = $(e).closest(".divTableRow").find("#book_code").text();
  var book_terminal_call = $(e).closest(".divTableRow").find("#book_terminal").text();
  alert(book_code_call);
  alert(book_terminal_call);
		
 }

.divTable{
			display: table;
			width: 100%;
			margin-top:20px;
		}
		.divTableRow {
			display: table-row;
		}
		.divTableHeading {
			background-color: rgba(0, 102, 179, 0.6) !important;
			color: #fff;
			display: table-header-group;
			white-space: nowrap;
			text-align:center;
		}
		.divTableCell, .divTableHead {
			border: 1px solid #e3e3e3;
			display: table-cell;
			padding: 3px 10px;
			width:30%;
			white-space: nowrap;
			text-align:center;
		}
		.divTableCell1, .divTableHead {
			border: 1px solid #e3e3e3;
			display: table-cell;
			padding: 3px 10px;
			white-space: nowrap;
			text-align:center;
		}
		.divTableHeading {
			background-color: #EEE;
			display: table-header-group;
			font-weight: bold;
		}
		.divTableFoot {
			background-color: #EEE;
			display: table-footer-group;
			font-weight: bold;
		}
		.divTableBody {
			display: table-row-group;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableCell">CANCEL</div>
		  <div class="divTableCell" >BOOKING #</div>
			<div class="divTableCell">ROUTE</div>
			<div class="divTableCell">FARE</div>
			<div class="divTableCell">SEAT #</div>
			<div class="divTableCell">DATE</div>
			<div class="divTableCell">TIME</div>
		</div>
	</div>
	<div class="divTableBody" id="divTableBody">
	  <div class="divTableRow">
      <div class="divTableCell1"><p onclick="cancel_reservation(this);"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">111</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">222222222</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell1"><p onclick="cancel_reservation(this);"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">aaaa</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">bbbb</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
	</div>
</div>

更新2

请同时找到以下代码片段...

使用.On添加类取消并在类上绑定(bind)单击方法

 $(".cancel").on("click",function(){
   var book_code_call  = $(this).closest(".divTableRow").find("#book_code").text();
    var book_terminal_call = $(this).closest(".divTableRow").find("#book_terminal").text();
		alert(book_code_call);
		alert(book_terminal_call);
 });

.divTable{
			display: table;
			width: 100%;
			margin-top:20px;
		}
		.divTableRow {
			display: table-row;
		}
		.divTableHeading {
			background-color: rgba(0, 102, 179, 0.6) !important;
			color: #fff;
			display: table-header-group;
			white-space: nowrap;
			text-align:center;
		}
		.divTableCell, .divTableHead {
			border: 1px solid #e3e3e3;
			display: table-cell;
			padding: 3px 10px;
			width:30%;
			white-space: nowrap;
			text-align:center;
		}
		.divTableCell1, .divTableHead {
			border: 1px solid #e3e3e3;
			display: table-cell;
			padding: 3px 10px;
			white-space: nowrap;
			text-align:center;
		}
		.divTableHeading {
			background-color: #EEE;
			display: table-header-group;
			font-weight: bold;
		}
		.divTableFoot {
			background-color: #EEE;
			display: table-footer-group;
			font-weight: bold;
		}
		.divTableBody {
			display: table-row-group;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableCell">CANCEL</div>
		  <div class="divTableCell" >BOOKING #</div>
			<div class="divTableCell">ROUTE</div>
			<div class="divTableCell">FARE</div>
			<div class="divTableCell">SEAT #</div>
			<div class="divTableCell">DATE</div>
			<div class="divTableCell">TIME</div>
		</div>
	</div>
	<div class="divTableBody" id="divTableBody">
	  <div class="divTableRow">
      <div class="divTableCell1"><p class="cancel"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">111</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">222222222</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell1"><p class="cancel"> CANCEL </p></div>
      <div class="divTableCell1" id="book_code"                       style="display:none;">aaaa</div>
      <div class="divTableCell1" id="book_terminal" style="display:none;">bbbb</div>
      <div class="divTableCell1">0000</div>
      <div class="divTableCell1">RWP_LHR</div>
      <div class="divTableCell1">900</div>
      <div class="divTableCell1">12</div>
      <div class="divTableCell1">26th May, 2016</div>
      <div class="divTableCell1">2335</div>
    </div>
	</div>
</div>