更改表tr td中除label之外的元素attr id
更改表tr td中除label之外的元素attr id
提问于 2015-09-23 18:01:06
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="http://akottr.github.io/css/akottr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
function change(){
$('#table2').find('thead').find('th').each(function(index){
$(this).attr('id','reportHead'+index);
});
$('#table2').find('tbody tr').each(function(index){
var rowname = $(this).find('td:first').attr('id');
$(this).find('td').each(function(index){
for(var i=0;i<=$(this).children('input,checkbox,select').length;i++){
if(i<1){
$(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index);
}else if(i>=1){
$(this).children('input,checkbox,select:gt('+i+')').attr('id',rowname+index+i);
}
}
$(this).attr('id',rowname+index);
});
});
}
</script>
</head>
<body>
<table style="background:#f3f3f3" class="thin defaultTable sortable draggable" id="table2">
<thead>
<tr>
<td id='title'>
title
</td>
<td id='subtitle'>
subtitle
</td>
<td id='movie'>
movie
</td>
<td id='song'>
song
</td>
</tr>
</thead>
<tbody>
<tr>
<td id='mango'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
<tr>
<td id='honey'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
<tr>
<td id='fox'>
<input type="text" class="form-control" name="filter" id="">
<input type="checkbox" value="test" name="test" id="">
</td>
<td>
<input type="text" class="form-control" name="filterc" id="">
<label>d</label>
</td>
<td>
<input type="text" class="form-control" name="filterd" id="">
</td>
<td><input type="text" class="form-control" name="filterd" id="">
<input type="text" class="form-control" name="filterf" id="">
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<input type='button' name='change' value='change' onclick='change()'/>
</body>
</html>我已经用这段代码完成了jquery表交换的概念，但是在交换之后这里没有提到的代码。我点击更改按钮来调整表中的标题id和元素id，我尝试了上面的代码，但是我没有得到确切的输出，请帮助我(标题正在工作)我需要tbody这样的输出
1st row 1st td contain 2 input elements
1st input id='mango0'
2nd input id='mango01'
1st row 2nd td contain 1 input 1 label
1st input id='mango1'
1st row 3rd td contain 1 input
1st input id='mango2'
1st row 4th td contain 1 input 1 label
1st input id='mango3'
2nd input id='mango31'
2nd row 1st td contain 1 input 1 checkbox
1st input id='honey0'
2nd input id='honey01'
2nd row 2nd td contain 1 input 1 label
1st input id='honey1'
2nd row 3rd td contain 1 input
1st input id='honey2'
2nd row 4th td contain 2 input
1st input id='honey3'
2nd input id='honey31' Stack Overflow用户
发布于 2015-09-23 19:22:58
在每个td侧
$(this).find('td').each(function(index){
var i = 1;
var j;
$(this).find('input').each(function(index){
if(index == 0){
j = index;
$(this).attr('id',rowname+index);
}else{
$(this).attr('id',rowname+j+i);
i++;
}
});
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32736506
复制相关文章
相似问题
腾讯云开发者
