td 元素上的 OnClick 函数返回第一列值和标头值

OnClick function on td element return firstcolumn value and header value

本文关键字：一列 元素 OnClick 函数 返回 td      更新时间：2023-09-26

我有带有onlick="myfunction（）"的TD元素。我希望该函数使用表中的其他值创建自定义 location.href。

function myfunction( elem ) {
 var table = $('#horo').DataTable();
 var idx = table.cell(elem).index().column;
 var ColumnHeader = table.column(idx).header();
 var FirstColumnValue = X;
 location.href = "Page.cshtml?ID=" + ColumnHeader + "?Name=" + FirstColumnValue;
}

每次它一直告诉我Page.cshtml？ID=Undefined。

表是这样叫的

          <table class="horo" width="1235px" style="border-style: solid; border-width: thin">
        <thead>
            <tr>
                @foreach(DataColumn col in table.Columns)
                {
                    <th class="cedule2">@col.ColumnName</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach(DataRow row in table.Rows)
            {
                <tr>
                    @foreach(DataColumn col in table.Columns)
                    {
                        <td  onclick="myfunction(this)" onmouseover="" style="width: 154px; border: 1px solid black">@row[col.ColumnName]<br></td>
                    }
                </tr>
            }
        </tbody>
    </table>

这是我使用 Razor 创建表的方式 

DataTable table = new DataTable();
for(int i = 0; i <= data.Count(); i++){
    table.Columns.Add(i.ToString(), typeof(string));
}
foreach(var col in data.First().Columns){
    var val = new List<string>();
    val.Add(col);
    foreach(var rec in data){
        val.Add(rec[col].ToString());
    }
    table.Rows.Add(val.ToArray());
}

非常感谢您的帮助。真的很感激

this在你的

例子中是一个窗口对象，你需要再次调用你用来实例化datatables的元素，假设：

function myfunction( elem ) {
  // assume you call datatable with 
  // this element = $('table#myTable')
  // then use that
  var table = $('table#myTable').DataTable();
  // `this` inside .cell(this) should change to current clicked element
  // and must be passed as function args
  var idx = table.cell(elem).index().column;
  var ColumnHeader = table.column(idx).header();
  var FirstColumnValue = Noclue;
  location.href = "Page.cshtml?ID=" + ColumnHeader + "Name=" + FirstColumnValue;
}

所以TD元素应该是：

<td onclick="myfunction(this)">......</td>

不要使用内联脚本并直接调用函数，而是使用 jQuery .on 进行操作：

var table = $('table#myTable').DataTable();
$('table#myTable tbody').on( 'click', 'td', function () { 
  var idx = table.cell(this).index().column;
  var ColumnHeader = table.column(idx).header();
  var FirstColumnValue = Noclue;
  location.href = "Page.cshtml?ID=" + ColumnHeader + "Name=" + FirstColumnValue;
});
相关文章：