Javascript 基于值向表的每个td添加标题属性

我有两张桌子

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

现在，我希望第二个表的每个td都有标题，作为TrainingInstanceId中给定的值

基本上我想要这样的东西

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

---

如果TrainingInstanceId以数组形式出现，请尝试此操作

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

如果TrainingInstanceID以字符串形式出现，则使用

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

---

如果TrainingInstanceID以数组形式出现，请选中此项

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

如果TrainingInstanceID以字符串形式出现，则使用

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

---

并检查此项

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

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

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

---

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

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

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

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

// 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);
    });
});

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

// 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

---

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

您可以将一个函数传递给jQuery的attr方法：

---

您可以将一个函数传递给jQuery的attr方法：

---

---

如果它是动态创建的，您能在生成表的代码中首先这样做吗？我想为已经创建的表添加标题如果它是动态创建的，您可以在生成表的代码中首先执行此操作吗？我想为已创建的表添加标题Uncaught TypeError:对象1,9没有方法“split”TrainingInstanceId以字符串形式出现，或者objectcheck更新了答案，但trainingInstance.id返回的是什么？一个字符串值，一个数组，或者如果是一个对象，那么它的结构是什么。在您的演示中，您使用带有标题的html。@CharlesJourdan，谢谢，现在更正了这一点并更新了演示：Uncaught TypeError:object 1,9没有“split”方法TrainingInstanceId作为字符串出现，或者objectcheck更新了答案，但是什么trainingInstance.id正在返回？一个字符串值，一个数组，或者如果是一个对象，那么它的结构是什么。在您的演示中，您使用带有标题的html。@CharlesJourdan，谢谢，现在更正了这一点并更新了演示：它不向动态添加的tds添加标题，但适用于常规tds，如果您替换$.eachtr。。。每个“table.second tbody tr”都有美元。。它应该适用于动态添加的tds。我假设TrainingInstanceID是表I编辑和注释。对于动态td，我认为您将此代码放入函数中，并在每次更新表时调用此函数。它不会为动态添加的tds添加标题，但适用于常规tds，如果您替换$.eachtr。。。每个“table.second tbody tr”都有美元。。它应该在动态添加的情况下工作。我假设TrainingInstanceID是表I编辑和注释。对于动态td，我认为您将此代码放入函数中，并在每次更新表时调用此函数。更好、最简单的解决方案更好、最简单的解决方案