如何在循环中设置title属性？

Question

var gender =  {"张三":"男","李四":女"}
draw = "<div><table><tbody>";
recv = '{"张三": ["89", "63", "78", "77"], "李四": ["99", "75", "98", "97"]}';
obj = JSON.parse(recv);
for (i in obj){
    draw += "<tr><td>" + i + "</td><td>" + obj[i][0] + "</td><td>" + obj[i][1] + "</td><td>" + obj[i][2] + "</td></tr>";}
draw += "</tbody></table></div>";
document.write(draw);

用循环，根据返回的数据生成了一个表格，这个表格有2行，分别是张三和李四，现在希望在鼠标悬停的在对应行的时候，显示对应的性别。比如生成的表格里面，鼠标放在张三的那一行，就提示男。
现在的想法是直接在tr标签里添加title=''属性，从属性里引用gender这个字典，或者添加一个onmouseover/onmouseout事件。
因为成品表格会有很多行，所以需要用循环来实现，不能手工添加。
不知道哪种可行，以及怎么写，请指教！

Answer 1

    var gender = { "张三":"男","李四":"女" }
    var draw = "<div><table><tbody>";
    recv = '{"张三": ["89", "63", "78", "77"], "李四": ["99", "75", "98", "97"]}';
    obj = JSON.parse(recv);
    for (i in obj){
      var title = gender[i]
      draw += "<tr title=" + title +  "><td>" + i + "</td><td>" + obj[i][0] + "</td><td>" + obj[i][1] + " 
      </td><td>" + obj[i][2] + "</td></tr>";}
    draw += "</tbody></table></div>";
    document.write(draw);