如何在单击行按钮时获取订单号和选定值

时间：2017-10-03 13:04:53

标签： javascript jquery html

我有一个如下结构的表格，我希望用户onclick在视图详细信息按钮上获取订单ID的值以及从数组中的combobox到所选选项的值在ajax中使用它来更新数据库，如何做到这一点？ 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<thead>
			<tr>
				<th>Order No.</th>
				<th>Customer Name</th>
				<th>Order Status</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>4</td>
				<td>Jack</td>
				<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
				<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
			</tr>
			<tr>
				<td>5</td>
				<td>Adel</td>
				<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
				<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
			</tr>
			<tr>
				<td>6</td>
				<td>Aly</td>
				<td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
				<td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails()">view</button></td>
			</tr>
		</tbody>
	</tr>
</table>

5 个答案:

答案 0 :(得分：1)

这可能就是你要找的东西。这将从按下按钮的女巫行中获取选择的id和选定值。

function ViewDetails(obj) {
  var $obj = $(obj);
  var id, option;

  id = $obj.closest("tr").find("td:eq(0)").text();
  option = $obj.closest("tr").find("td:eq(2) select").val();

  console.log(id + " | " + option)
}

请注意，我已将this添加到onclick="ViewDetails()"，onclick="ViewDetails(this)"

<强>演示 

function ViewDetails(obj) {
  var $obj = $(obj);
  var id, option;
  
  id = $obj.closest("tr").find("td:eq(0)").text();
  option = $obj.closest("tr").find("td:eq(2) select").val();
  
  console.log(id + " | " + option)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <thead>
      <tr>
        <th>Order No.</th>
        <th>Customer Name</th>
        <th>Order Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>4</td>
        <td>Jack</td>
        <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
        <td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
      </tr>
      <tr>
        <td>5</td>
        <td>Adel</td>
        <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
        <td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
      </tr>
      <tr>
        <td>6</td>
        <td>Aly</td>
        <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
        <td><button type="button" value="Ok" class="btn btn-success ViewDetails btn-sm" onclick="ViewDetails(this)">ViewDetails</button></td>
      </tr>
    </tbody>
  </tr>

答案 1 :(得分：1)

in html：

onclick="ViewDetails(this)"

JS：

function ViewDetails(_el){
    var orders_id=$(_el).parent().parent().find("td:first").html();
    alert(orders_id);
    ////////...........
}

答案 2 :(得分：1)

为包含{1}}的每个class和每个td元素的公共class添加一个公共select。然后使用jquery查找父tr＆amp;使用find方法获取值

function viewDetails(elem) {
  // finding parent tr and then the td for orderId
  var orderId = $(elem).parent().parent().find('.odId').text().trim();
  // get selected option from dropdown
  var selectedOption = $(elem).parent().parent().find('.selected').val();
  console.log(orderId, selectedOption)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <thead>
    <tr>
      <th>Order No.</th>
      <th>Customer Name</th>
      <th>Order Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="odId">4</td>
      <td>Jack</td>
      <td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
      <td><button id="ViewDetails_1" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
    </tr>
    <tr>
      <td class="odId">5</td>
      <td>Adel</td>
      <td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
      <td><button id="ViewDetails_2" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
    </tr>
    <tr>
      <td class="odId">6</td>
      <td>Aly</td>
      <td><select class='selected'><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
      <td><button id="ViewDetails_3" type="button" value="Ok" class="btn btn-success btn-sm" onclick="viewDetails(this)">Click</button></td>
    </tr>
  </tbody>
</table>

答案 3 :(得分：0)

试试这个 

$(document).on('click', '.view_details', function(){
  p = $(this).parents("tr")
  order_id     = p.find("td:first").html()
  select_value = p.find("select").val()
  alert("order_id:"+order_id+"  selected:"+select_value)
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <thead>
        <tr>
            <th>Order No.</th>
            <th>Customer Name</th>
            <th>Order Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>Jack</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
        </tr>
        <tr>
            <td>5</td>
            <td>Adel</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
        </tr>
        <tr>
            <td>6</td>
            <td>Aly</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm view_details" >view</button></td>
        </tr>
    </tbody>
</tr>

答案 4 :(得分：0)

将onclick="ViewDetails()"更改为onclick="ViewDetails(this)"，这样您就可以将DOM元素传递给您的函数。

现在你的功能：

function ViewDetails(buttonEl) {
    var row = buttonEl.closest('tr'); // here you'll get your row
    var orderId = row.getElementsByTagName('td')[0].textContent; //order id
    var status = row.getElementsByTagName('select')[0].value; //status
}

＆＃13;
＆＃13; 
function ViewDetails(buttonEl) {
    var row = buttonEl.closest('tr'); // here you'll get your row
    var orderId = row.getElementsByTagName('td')[0].textContent; //order id
    var status = row.getElementsByTagName('select')[0].value; //status
    
    console.log(orderId + ' ' + status);
}
＆＃13; 
<table>
<tr>
    <thead>
        <tr>
            <th>Order No.</th>
            <th>Customer Name</th>
            <th>Order Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>Jack</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
        </tr>
        <tr>
            <td>5</td>
            <td>Adel</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
        </tr>
        <tr>
            <td>6</td>
            <td>Aly</td>
            <td><select><option>Delivered</option><option>In Progress</option><option>Cancelled</option></select></td>
            <td><button id="ViewDetails" type="button" value="Ok" class="btn btn-success btn-sm" onclick="ViewDetails(this)"></button></td>
        </tr>
    </tbody>
</tr>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题