Question

如何使用jquery从表中的选定单元格中获取值？

以下是HTML表的代码：

<div class="page-content">
    <asp:Repeater ID="Repeater1" OnItemCommand="R1_ItemCommand" runat="server">
        <HeaderTemplate>

            <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet box blue-hoki">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-globe"></i>Clients
                        </div>
                        <div class="tools">
                            <a href="javascript:;" class="collapse">
                            </a>
                            <a href="#portlet-config" data-toggle="modal" class="config">
                            </a>
                            <a href="javascript:;" class="reload">
                            </a>
                            <a href="javascript:;" class="remove">
                            </a>
                        </div>
                    </div>

            <div class="portlet-body">
            <table style="width:100%" class="table table-striped table-bordered table-hover" id="sample_1">
                <thead>
                <tr>
                    <th><%=Resources.Strings.ClientID%></th>                            
                    <th><%=Resources.Strings.ClientProvider%></th>                        
                    <th><%=Resources.Strings.ClientEnterprise%></th>
                    <th><%=Resources.Strings.ClientName%></th>
                    <th><%=Resources.Strings.ClientLastName%></th>
                    <th><%=Resources.Strings.ClientAddress1%></th>
                    <th><%=Resources.Strings.ClientAddress2%></th>
                    <th><%=Resources.Strings.ClientZIPCode%></th>
                    <th><%=Resources.Strings.ClientCity%></th>
                    <th><%=Resources.Strings.ClientCountry%></th>
                    <th><%=Resources.Strings.ClientValidFrom%></th>
                    <th><%=Resources.Strings.ClientValidUntil%></th>
                </tr>
                </thead>

        </HeaderTemplate>            
        <ItemTemplate>   
            <tbody>
            <tr>
                <td><a href="#" onclick="selectedClientID()"><%# Eval("ID_CLIENT")%></a></td> 
                <td><%# Eval("PROVIDER")%></td>                    
                <td><%# Eval("ENTERPRISE")%></td>
                <td><%# Eval("FIRST_NAME")%></td>
                <td><%# Eval("LAST_NAME")%></td>
                <td><%# Eval("ADDRESS1")%></td>
                <td><%# Eval("ADDRESS2")%></td>
                <td><%# Eval("ZIP_CODE")%></td>
                <td><%# Eval("CITY")%></td>
                <td><%# Eval("COUNTRY")%></td>
                <td><%# Eval("VALID_FROM", "{0: dd.MM.yyyy}")%></td>
                <td><%# Eval("VALID_UNTIL", "{0: dd.MM.yyyy}")%></td>
            </tr>
           </tbody>             
        </ItemTemplate>
        <FooterTemplate>
            </table>
            </div>
            </div>
        </FooterTemplate>
    </asp:Repeater>

    </div>
<script>

    function selectedClientID()
    {
        $('td').click(function () {
            var colIndex = $(this).parent().children().index($(this));
            var rowIndex = $(this).parent().parent().children().index($(this).parent());
            var value = 'td:eq(' + colIndex + ')';
            alert($('#tblClient').find(value).html());
        });
    }

当用户点击第一列的任何项目时，输出就像

 <a href="#" onclick="selectedClientID()">1902</a>

但我想得到的唯一值1902.有没有办法获得1902的价值，或者我应该制作某种解析器？

Answer 1

使用此Jquery

 function selectedClientID2(el)
 {
   alert(+el.innerHTML)  
 }

Answer 2

如果你在DOM中使用onclick

，有两种方法（我更喜欢第二种）

function selectedClientID(){
  alert(+arguments.callee.caller.arguments[0].target.innerHTML)  
}

function selectedClientID2(el){
  alert(+el.innerHTML)  
}

<a href="#" onclick="selectedClientID()">1902</a>

<a href="#" onclick="selectedClientID2(this)">1903</a>

Answer 3

不鼓励使用

onclick属性

最好在脚本中添加监听器

我会做这些改变

var rows = document.getElementsByClassName('js-row-object');
var keys = [
  'PROVIDER',
  'ENTERPRISE',
  'FIRST_NAME',
  'LAST_NAME',
  'ADDRESS1',
  'ADDRESS2',
  'ZIP_CODE',
  'CITY',
  'COUNTRY',
  'VALID_FROM',
  'VALID_UNTIL'
]

for(var i=0; i<rows.length; i++){
  var row = rows[i]; // get the current row
  var cells = row.getElementsByTagName('td'); // get the TD element list for that row
  var link = row.getElementsByClassName('js-select-link')[0]; // get the clickable link
  
  link.__data__ = {}; // we instanciate a model
  link.__data__['ID_CLIENT'] = link.innerText; // value ID_CLIENT is from the link innerText
  
  key.forEach(function(key, index){// then to avoid boilerplate we loop for each other keys
    link.__data__[key] = cells[index + 1].innerText;// as index 0 is containing the link, we add +1 to the cell's index
  });
  
  // now our object should look like
  // link.__data__ = {
  //  ID_CLIENT: 1,
  //  PROVIDER: 'some text',
  //  ...
  // }
  
  link.addEventListener('click', function(e){
    alert(JSON.stringify(link.__data__)); // return an alert friendly format
    // or 
    console.log(link.__data__);
  });
}

<ItemTemplate>   
  <tbody>
    <tr class="js-row-object">
      <td><a href="#" class="js-select-link"><%# Eval("ID_CLIENT")%></a></td> 
      <td><%# Eval("PROVIDER")%></td>                    
      <td><%# Eval("ENTERPRISE")%></td>
      <td><%# Eval("FIRST_NAME")%></td>
      <td><%# Eval("LAST_NAME")%></td>
      <td><%# Eval("ADDRESS1")%></td>
      <td><%# Eval("ADDRESS2")%></td>
      <td><%# Eval("ZIP_CODE")%></td>
      <td><%# Eval("CITY")%></td>
      <td><%# Eval("COUNTRY")%></td>
      <td><%# Eval("VALID_FROM", "{0: dd.MM.yyyy}")%></td>
      <td><%# Eval("VALID_UNTIL", "{0: dd.MM.yyyy}")%></td>
    </tr>
  </tbody>             
</ItemTemplate>

从HTML表格中的单元格中重新选择所选值

3 个答案: