Question

我有两张桌子

 <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 Part：

  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 - 方法：

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()];
});

Example at JSFiddle

Answer 2

迭代td而不是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);
});

并选中 DEMO

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。

根据值为表的每个td添加title属性

4 个答案: