您的位置:首页 > 移动开发

添加删除表格append或 createElement

2016-06-06 12:02 183 查看
方法一:

js代码:增加一行五列的表格

function AddList(){
  $len= document.getElementsByName('goods_name[]').length;
obj = document.getElementById('tab_g');

$str1 = '1';
$str2 = '2';
$str3 = '3';
$str4 = '4';
$str5 = '5';

newTr = document.createElement('tr');
  newTr.id = 'List_'+$len;
newTd1 = document.createElement('td');
newTd2 = document.createElement('td');
newTd3 = document.createElement('td');
newTd4 = document.createElement('td');
newTd5 = document.createElement('td');

newTd1.innerHTML = $str1;
newTd2.innerHTML = $str2;
newTd3.innerHTML = $str3;
newTd4.innerHTML = $str4;
newTd5.innerHTML = $str5;

newTr.appendChild(newTd1);
newTr.appendChild(newTd2);
newTr.appendChild(newTd3);
newTr.appendChild(newTd4);
newTr.appendChild(newTd5);

document.getElementById('tab_g').appendChild(newTr)
}


方法二:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#getAtr").click(function(){
$str='';
$str+="<tr align='center'>";
$str+="<td><input type='text' name='advTitle[]'/></td>";
$str+="<td><input type='file' name='img[]' /></td>";
$str+="<td><input type='text' name='advContent[]' /></td>";
$str+="<td><input type='text' name='advSource[]' /></td>";
$str+="<td><input type='text' name='advAuthor[]' /></td>";
$str+="<td><input type='text' name='advPosition[]' /></td>";
$str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
$str+="</tr>";
$("#addTr").append($str);
});
});

function getDel(k){
$(k).parent().remove();
}
</script>

--------------------------------------------------------------------------------
html部分
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td>广告名称</td>
<td>广告图片</td>
<td>广告内容</td>
<td>广告来源</td>
<td>广告作者</td>
<td>广告描述</td>
<td align="center"><a href="#" id="getAtr">追加内容</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="advTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="advContent[]" /></td>
<td><input type="text" name="advSource[]" /></td>
<td><input type="text" name="advAuthor[]" /></td>
<td><input type="text" name="advPosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5"><input type="submit" value="全部添加" /></td>
</tr>
</table>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: