Question

我有一个包含多行的表格。我有一些行，每个行都有一个特定的类。在最后一行，我有一个链接。如何在链接中替换其名称前面的每个td文本？我写了下面的代码，但它在我的链接末尾设置了文本。这是我的片段：

$(".list").each(function(index, element) {
 var route=$(this).closest("tr").find(".route").text()
 var airline=$(this).closest("tr").find(".airline").text()
 var route=$(this).closest("tr").find(".route").text()
 var linkk=$(this).attr("href")
 $(this).attr("href",linkk+route+airline+route); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td class="route">tehran-istanbul</td>
<td class="airline">Iran air</td>
<td class="route">Ss 454</td>
<td><p class="date1">1398-5-12</p><p class="date2">(2017-08-23)</p></td>
<td><a href="page2.bc?route=&airline=&route=&date1=&date2=" class="list">link</a></td>
</tr>

<tr>
<td class="route">tehran-Ankara</td>
<td class="airline">Tukish airline</td>
<td class="route">7547</td>
<td><p class="date1">1395-5-12</p><p class="date2">(2018-01-01)</p></td>
<td><a href="page2.bc?route=&airline=&route=&date1=&date2=" class="list">link</a></td>
</tr>
</table>

Answer 1

您的代码存在一些问题：

你正在重新声明变量路由，在你的情况下没有帮助，而是初始化两个变量route1和route2。 linkk+route+airline+route无法提供您需要的字符串，您需要添加额外的字符串，例如＆＃39; route =＆＃39;识别两者之间的参数。 $(this).parents("tr").find(".route")将为您提供具有类路由的多个元素，您需要定位特定元素，您可以在您的情况下使用first（）和last（）。

＆＃13;

$(".list").each(function(index, element) {
 var route1= "route=" + $(this).parents("tr").find(".route").first().text();
 var airline= "airline=" + $(this).parents("tr").find(".airline").first().text();
 var route2= "route=" + $(this).parents("tr").find(".route").last().text();
  var date1 = "date1=" + $(this).parents("tr").find(".date1").first().text();
  var date2 = "date2=" + $(this).parents("tr").find(".date2").first().text();
 var link = $(this).attr("href").replace(/\?.*/g, "?") + route1 + "&" + airline + "&" + route2  + "&" + date1 + "&" + date2;
 $(this).attr("href", link);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td class="route">tehran-istanbul</td>
<td class="airline">Iran air</td>
<td class="route">Ss 454</td>
<td><p class="date1">1398-5-12</p><p class="date2">(2017-08-23)</p></td>
<td><a href="page2.bc?route=&airline=&route=&date1=&date2=" class="list">link</a></td>
</tr>

<tr>
<td class="route">tehran-Ankara</td>
<td class="airline">Tukish airline</td>
<td class="route">7547</td>
<td><p class="date1">1395-5-12</p><p class="date2">(2018-01-01)</p></td>
<td><a href="page2.bc?route=&airline=&route=&date1=&date2=" class="list">link</a></td>
</tr>
</table>

＆＃13;

Answer 2

与@DiJ类似，我略微更改了您的一个参数的名称（第二个route到routeno）。然后我基本上尝试将代码减少到最小，同时使代码更简单。

＆＃13;

$(".list").each(function(index, element) {
 ['route','airline','routeno'].forEach(function(i,o){console.log(i)});
 $(this).closest("tr").find("td").each((i,o)=>{
   if (vars.indexOf(o.className)>-1)
     this.href+=o.className+'='+encodeURIComponent(o.innerHTML)+'&';     
 });
 this.href+='date1=&date2=';
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td class="route">tehran-istanbul</td>
<td class="airline">Iran air</td>
<td class="routeno">Ss 454</td>
<td><p class="date1">1398-5-12</p><p class="date2">(2017-08-23)</p></td>
<td><a href="page2.bc?" class="list">link</a></td>
</tr>

<tr>
<td class="route">tehran-Ankara</td>
<td class="airline">Tukish airline</td>
<td class="routeno">7547</td>
<td><p class="date1">1395-5-12</p><p class="date2">(2018-01-01)</p></td>
<td><a href="page2.bc?" class="list">link</a></td>
</tr>
</table>

＆＃13;

您也可以在没有indexOf()测试的情况下执行相同的操作，例如

$(".list").each(function(index, lnk) {
 var $tr=$(lnk).closest("tr");
 ['route','airline','routeno'].forEach(function(col,i){
   lnk.href+=encodeURIComponent($tr.find("td."+col).text())+'&'; });
 lnk.href+='date1=&date2=';
});

如何替换tds的文本而不是href

2 个答案: