Question

我想过滤表的第二列，在我的“个人资料”中找到匹配的条目，然后使用USE Sandbox; GO CREATE FUNCTION dbo.fn_parsename (@ObjectName nvarchar(386), @PartNum tinyint) RETURNS sysname WITH SCHEMABINDING AS BEGIN DECLARE @PartName sysname; SELECT @PartName = SUBSTRING(@ObjectName, CASE @PartNum WHEN 1 THEN 1 WHEN 2 THEN one.CI+1 WHEN 3 THEN two.CI+1 WHEN 4 THEN three.CI+1 END, CASE @PartNum WHEN 1 THEN one.CI-1 WHEN 2 THEN ISNULL(two.CI -1,LEN(obj)) - one.CI WHEN 3 THEN ISNULL(three.CI -1,LEN(obj)) - two.CI WHEN 4 THEN ISNULL(four.CI -1,LEN(obj)) - three.CI END) FROM (VALUES(@ObjectName)) V(Obj) CROSS APPLY (VALUES(NULLIF(CHARINDEX('.',V.obj),0))) one(CI) CROSS APPLY (VALUES(NULLIF(CHARINDEX('.',V.obj,one.CI+1),0))) two(CI) CROSS APPLY (VALUES(NULLIF(CHARINDEX('.',V.obj,two.CI+1),0))) three(CI) CROSS APPLY (VALUES(NULLIF(CHARINDEX('.',V.obj,three.CI+1),0))) four(CI); RETURN @PartName; END; GO CREATE TABLE Test (ObjectName nvarchar(386), DatabaseName AS dbo.fn_parsename(ObjectName,1) PERSISTED) GO INSERT INTO dbo.Test (ObjectName) VALUES('Sandbox.dbo.Test'), ('AdventureWorks2012.Person.Address'); SELECT * FROM dbo.Test; GO DROP TABLE Test; DROP FUNCTION dbo.fn_parsename;将名称设为对应的链接。

我尝试用几种不同的方式来做，但是我似乎无法使其正常工作。

attr('href', $(link))

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];

Answer 1

您可以将each用作tr，并使用filter来检查数组中的值。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){

    var link = exist[0].link;

    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){
    
    var link = exist[0].link;
    
    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>

Answer 2

以下是为您提供查询解决方案的解决方案。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
var getTableRows = document.querySelectorAll("tbody tr");
var totalRows = getTableRows.length;
var i = 0;
while (i < totalRows) {
    let name = getTableRows[i].childNodes[1].innerHTML;
    for(let j=0; j<profiles.length; j++){
        if(profiles[j].name === name){
            getTableRows[i].childNodes[1].innerHTML = "<a href=" + profiles[j].link + ">" + name + "</a>";
        }
    }
    i++;
}

<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>

Answer 3

只需使用jQuery（我假设您可以使用它吗？）即可动态添加条目。另外，请勿使用表格。您应该将<div>与flexbox结合使用。参见示例：

var profiles = [{
    "name": "Susie",
    "link": "http://www.google.com"
  },
  {
    "name": "John",
    "link": "http://www.yahoo.com"
  }
];

$(document).ready(function() {
  for (var i = 0; i < profiles.length; i++) {
    var html = '<div>';
    html += '<div>' + profiles[i].name + '</div>';
    html += '<div><a href="' + profiles[i].link + '" target="_blank">Link</a></div>';
    html += '</div>';
    $("#people").append(html);
  }
});

#people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
}

#people>div>div {
flex: 1;
padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div>

另一种甚至更现代的方法是完全删除多余的列，并使整个行都可单击：

var profiles = [{
    "name": "Susie",
    "link": "http://www.google.com"
  },
  {
    "name": "John",
    "link": "http://www.yahoo.com"
  }
];

$(document).ready(function() {
  $("#people").on("click", ">div", function() {
    //window.location.href = $(this).data('url');
    console.log("Going to: " + $(this).data('url'));
  });

  for (var i = 0; i < profiles.length; i++) {
    var html = '<div data-url="' + profiles[i].link + '">';
    html += '<div>' + profiles[i].name + '</div>';
    html += '<div>Some other use data...</div>';
    html += '</div>';
    $("#people").append(html);
  }
});

#people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#people>div:hover {
  background-color: black;
  color: white;
}

#people>div>div {
  flex: 1;
  padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div>

Answer 4

https://jsfiddle.net/wer4mfuv/

HTML部分：

<table id="myTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Susie</td>
        </tr>
    <tr>
            <td>15</td>
            <td>TEST1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
        </tr>
    <tr>
            <td>3</td>
            <td>Test</td>
        </tr>
</tbody>

JavaScript：

var profiles = [
    {"name": "Susie", "link": "www.google.com"},
    {"name": "John", "link": "www.yahoo.com"},
    {"name": "TEST1", "link": "www.yahoo.com"}
];

var trs = document.querySelectorAll("#myTable tbody tr");
Array.from(trs).forEach(a => {
    var trname = a.children[1].innerText;
    var search = profiles.find(x => x.name == trname);
    if (search != null) {
        a.children[1].innerHTML = '<a href="' + profiles.find(x => x.name == trname).link + '">' + trname + '</a>';
        a.style.display = "";
    } else {
        a.style.display = "none";
    }
  });

如何过滤表，在json数据中找到匹配的条目并添加相应的链接

4 个答案: