勉強いろいろ

去年3月に記事に書いた以下のソースコード

$('table tr').append(function(idx, html){
return html.replace(/(<td>)([^<]+)(<\/td>)/,
    "$1<a href=\"" + $(this).children('td').data('link') + "\">$2</a>$3");

自分なりに解釈して、このままでは思うように動かなかったので書き直した。

/* javascriptのコード */
$(function(){
let $ret1;
let $ret2;
let $tmp;
let $tmp2;
let $tmp3;
let $tmp4;

/* (やりたいこと)linkがない<td>データをdata-link属性から取得してlinkをつける
$('table tr').append(function(idx, html){
   return html.replace(/(<td>)(.*)(<\/td>)/,
       "$1<a href=\"" + $(this).children('td').data('link') + "\">$2</a>$3");
});

↑このソースを改変しても思うようにいかなかったので、
↓こんな風に書き直した。
*/

$('table tr').each((i, tr) => {

   $(tr).each((k, td) => {

       $tmp = $(td).find('#name').prop("outerHTML");
       $tmp2 = $(td).find('#age').prop("outerHTML");

       if($tmp !== undefined){
           $tmp3 = $tmp.replace(/(<td.*>)(.*)(<\/td>)/, 
           "$1<a href=\"" + $(td).find('#name').data('link') + "\">$2</a>$3")

           $tmp4 = $tmp2.replace(/(<td.*>)(.*)(<\/td>)/, 
           "$1<a href=\"" + $(td).find('#age').data('link') + "\">$2</a>$3")

           $(tr).append($tmp3);
           $(tr).append($tmp4);
       }
       //$ret1 = $(td).find('#name').data('name');
       //$ret2 = $(td).find('#age').data('age');

   });

});

});

    /* htmlのコード */
    <table border="1">
       <tr>
           <th>氏名</th>
           <th>年齢</th>
       </tr>

       <tr>
           <td data-link='http://tanaka.com' id="name" data-name="田中">田中</td>
           <td id="age" data-age="21">21</td>
       </tr>

       <tr>
           <td data-link='http://sato.com' id="name" data-name="佐藤">佐藤</td>
           <td id="age" data-age="27">27</td>
       </tr>
   </table>

3hくらいかかった。