关于tr、td(1)-优快云博客

本文链接：https://blog.youkuaiyun.com/zbyluxzing/article/details/47441811

本文介绍了两个关于使用JavaScript操作DOM元素的具体实例。第一个实例展示了如何通过JavaScript选择特定的表格行和单元格，并修改单元格的内容；第二个实例则演示了如何通过AJAX获取数据并利用这些数据动态创建表格行和单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例1:选择相应的tr 相应的td td相应的列(对tr和td进行选择)

    <table>
     <tbody id="testzby">    *********
    <s:iterator value="pageInfo.searchResult" id="it" status="optr">
    <<span style="color:#FF0000;">tr</span> class="${optr.count % 2 == 0 ? 'odd' : 'even'}" >
    <td style="width: 10%;">
    <exts:property value="#it[2]" />
    </td>
    <td style="width: 5%; text-align: center;">
    <c:if test="${it[3] != '1'}">
    <c:if test="${it[4]==''||it[4]==null}">
    <a href="javascript:void(0)" onClick="change('${it[5]}','<s:property value="#optr.index"/>');">已阅读</a>
    </c:if>
    <c:if test="${it[4]!=''&&it[4]!=null}">
    <c:if test="${it[6]!='1004'}">
    <a href="${ctx}/${it[4]}">未处理</a>
    </c:if>
    <c:if test="${it[6]=='1004'}">
    <a href="${ctx}/${it[4]}&speedid=${it[5]}">未处理</a>
    </c:if>
     </c:if>
     </c:if>
     <c:if test="${it[3] != '0'}">
    已处理
    </c:if>
    </td>
    </tr>
     </s:iterator>
</tbody>
</table>

$("#testzby tr").eq(canshu2).find('td:eq(3)').text("已处理"); ********选择相应的tr 相应的td td相应的列并将相应的列内容改为"已处理"

其中canshu2的值为：canshu2=<s:property value="#optr.index"/>

实例2:用js进行拼接tr和td

	<div id="light" class="white_content"> 
	<table width="100%"  border="0" cellspacing="0" class="gridBody" id="tableid">
           <thead>
            <tr>
            <th style="width:40px;" align="center">序号</th> 
            <th align="center">选择</th>
            <th align="center">销售姓名</th>
             </tr>
           </thead>
          <tbody>     **********
          </tbody>    **********
           </table>
         </div>

$.ajax({
                 type:"POST",
                 url: "${ctx}/systemUser/worktransferAction.action",
                 data:{"id":idds[0]},
                 dataType:"json",
                 success:function(data)
                 {
                   for(var i=0;i<data.length;i++){
                       htmlstr = htmlstr+"<tr class='asd'>"+
                                         "<td class='center'>"+parseInt(i+1)+"</td>"+
                                         "<td class='center' align=center>"+
                                         "<input type='radio' name='items' value='"+data[i][1]+"' onclick='transferoneready("+data[i][1]+")'/></td>"+
                                         "<td class='center'>"+data[i][0]+"</td>";
                                         "</tr>";
                   }
                   $("#tableid tbody").html(htmlstr);   //@@@用html进行加载
                },
             error:function(){
                    alert("未执行操作");
                       }
           });