我想点击表格中特定行上的按钮,并在表格的特定单元格中显示数据

时间:2018-08-07 11:13:57

标签: javascript php jquery html

这是我试图做的,但是我无法使其正常工作,任何人都可以帮助我。 我想单击批准按钮,并使用与单击按钮相同的行的name="documentno"获取输入值。 谢谢

<form class="form-inline" action="approval.php" method="post"enctype="multipart/form-data">
<table class="table table-hover"  id="detailTable">
                     <thead>
                        <tr>
                         <th>Document no</th>
                         <th>Code</th>
                         <th>Name</th>
                         <th>Approve</th>
                         <th>Reject</th>
                           </tr>
                    </thead>
                      <tbody>
                        <tr id="somerow">
                       <?php
                       if($select==""){

                         while($rowstep34id = mysqli_fetch_array($querystep34)){
                          //echo "<td>" . $rowstep3['itemcode'] . "</td><td>" . $rowstep3['itemdescription'] . "</td><td>" . $rowstep3['quantity'] . "</td><td>" . $rowstep3['unitprice'] . "</td><td>" . $rowstep3['total'] . "</td><td>" . $rowstep3['remarks'] . "</td></tr>";
                          echo "<td><input type='text'  name='documentno' value='" . $rowstep34id['id'] . "'   readonly /></td>
                                <td><input type='text'  name='vendorcode' value='" . $rowstep34id['code'] . "'  readonly /></td>
                                <td><input type='text'  name='vendorname' value='" . $rowstep34id['name'] . "'  readonly /></td>

                                <td><button type='button' class='btn btn-primary' name='approve' onclick='tgPanel(this)'>approve</button></td>
                                <td><button type='button' class='btn btn-primary' name='reject'>reject</button></td>
                                </tr>";     
                        }
                         }
                        ?> 
                        </tbody>
                      </table>
                      </form>

<script>
function tgPanel(button) {
     var tr = button.parentElement.parentElement;
    var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);  
}
</script>

2 个答案:

答案 0 :(得分:0)

如果您可以为行定义一些ID或数据ID,则可以执行以下操作:

$(#row-id button).on("click", function{tgPanel($(this)});

function tgPanel(button)
{
    var data= button.closest("input[name='documentno']").val();
}

答案 1 :(得分:0)

使用当前的标记,您可以通过以下操作从同一行获取没有输入的document的值。

function tgPanel(button) {

  let documntnoVal = button.closest('tr').querySelector('input[name="documntno"]').value; 

  //remaining code ....
}

//The idea is when you click the approved button just select the parent tr (which will be the row containing approved button that is just clicked) and then select the input with name="documntno" which is your desired element.

注意:在您的标记中,您似乎错过了回声中的开头“ ”标签,因此请确保您的标记有效。