javascript - 根据一个值向表的每个 td 添加一个标题属性

Question

我有 2 张桌子

 <table class="first">
    <thead>
          <th> header1</td>
          <th> header2 </th>
    </thead> 
    <tbody>
           <tr>
                <td>hi</td>
                <td>hello</td>
           </tr>
    </tbody>
 </table>


 <table class="second">
    <thead>
          <th> header1</td>
          <th> header2 </th>
    </thead> 
    <tbody>
           <tr>
                <td>hi</td>
                <td>hello</td>
           </tr>
           <tr>
                <td>hi</td>
                <td>hello</td>
           </tr>
    </tbody>
 </table>

现在我的jQuery部分：

  var trainingInstanceIds = ${trainingInstance.id};
  alert(trainingInstanceIds) // which prints say 1,9,  

现在我希望第二个表的每个 td 都将标题作为 trainingInstanceIds 中给出的值

基本上我想要这样的东西

   <table class="second">
    <thead>
          <th> header1</td>
          <th> header2 </th>
    </thead> 
    <tbody>
           <tr>
                <td title="1">hi</td>
                <td title="9">hello</td>
           </tr>
           <tr>
                <td  title="1">hi</td>
                <td  title="9">hello</td>
           </tr>
    </tbody>
 </table>

trainingInstanceIds 的值和 td 的数量会发生变化。

在这里我想为已经创建的表添加标题

怎么做？

    $.each(trainingInstanceIds, function(index, value) { 

   });

Answer 1

您可以将一个函数传递给 jQuery 的attr-method：

var trainingInstanceArray = [1, 9]; 
// OR use if it's a string:
var trainingInstanceArray = trainingInstanceIds.split(',')
$('.second td').attr('title', function (index, attr) {
    return trainingInstanceArray[$(this).index()];
});​

JSFiddle 的示例

Answer 2

迭代tds 而不是 id 可能会产生更好的性能：

var trainingInstanceArray = trainingInstanceIds.split(',');

$('.second td').each(function(index, element) {
  var $el = $(this);
  $el.attr('title', trainingInstanceArray[$el.index()]);
});

编辑：我错过了你想要每一行的每个标题。以上更新。

Answer 3

试试这个，如果 trainingInstanceIds 以数组的形式出现。

$.each(trainingInstanceIds, function(index, value) {
    $('.second td:eq('+ index+')').prop('title', value);
});

或者如果 trainingInstanceIds 以字符串形式出现，则使用

$.each(trainingInstanceIds.split(','), function(index, value) {
    $('.second td:eq('+ index+')').prop('title', value);
});

并检查此演示

Answer 4

// I suppose that trainingInstanceIds is a table
$.each( $("table.second tbody tr"), function(){
    var tds = $(this).find("td");
    $.each(trainingInstanceIds, function(index, value) {
       $(tds[index]).attr("title", value);
    });
});

我想是这样的。但是您假设属性标题不符合 w3c。