[英]Create row ID for dynamic JS Table
I have working script that the user completes inputs on a form and when they submit the form and the content of the form inputs are entered as a table row. 我有一个工作脚本,用户在表单上完成输入,当他们提交表单时,表单输入的内容作为表格行输入。
Is there any way of, I think within the JS to make each row have a unique ID and add a delete button to the last colum of each row so the user can delete an individual row. 有没有办法,我认为在JS中,每行都有一个唯一的ID,并在每行的最后一个列中添加一个删除按钮,这样用户就可以删除一行。
Thanks for saving a life!!!! 谢谢你拯救生命!!!!
HTML Form HTML表单
<form id="my_form" action="table_form.php" method="post">
<div style="width:10%; float:left;">
Quantity<br />
<input name="field_1" type="text" id="field_1" size="3" />
</div>
<div style="width:20%; float:left;">
Part Number<br />
<input type="text" id="field_2" name="field_2" />
</div>
<div style="width:30%; float:left;">
Notes<br />
<input name="field_3" type="text" id="field_3" size="45" />
</div>
<div style="width:20%; float:left;">
Unit Price<br />
<input type="text" id="field_4" name="field_4" />
</div>
<div style="width:20%; float:left;">
<br />
<input type="submit" value="Add Row" />
</div>
</form>
<!--
Here we create our HTML table.
Note the ID of the table. This will be used in our javascript file
Our table only contains a header row. All other content will be added dynamically
--><? $rowid = 1; ?>
<table width="100%" id="my_table">
<tbody id="my_table_body">
<tr>
<th width="5%"><div align="left">Qty</div></th>
<th width="19%"><div align="left">Part Number</div></th>
<th width="46%"><div align="left">Notes</div></th>
<th width="15%"><div align="left">Unit Price</div></th>
<th width="15%"><div align="left">Row Total</div></th>
</tr>
</tbody>
</table>
window.addEvent('domready', function(){ $('my_form').addEvent('submit', function(e){ e.stop(); this.set('send', { onComplete: function( response ){ var data = JSON.decode(response); inject_row( $('my_table_body'), data ); } }); var valid_form = true; $$('#my_form input').each(function(item){ if( item.value == '' ) valid_form = false; }); if( valid_form ) { this.send(); } else { alert('Fill in all fields'); } }); var inject_row = function( table_body, data ){ var row_str = '<tr width="100%">'; data.each( function(item, index){ row_str += '<td>'+item+'</td>'; }); row_str += '<td><input type="submit" name="deleterow" id="deleterow" value="Delete" /></td></tr>'; var newRow = htmlToElements( row_str ); newRow.inject( table_body ); } var htmlToElements = function(str){ return new Element('div', {html: '<table><tbody>' + str + '</tbody></table>'}).getElement('tr'); } });
PHP PHP
<?php /** * If nothing is being posted to this script redirect to * our HTML page. */ if( ! $_POST ){ header('Location: newquote.php'); } // create an empty array for our results $results = array(); /** * Stick the values from _POST into our results array * while also stripping out any html tags * * This is where you would perform any required processing * of the form data such as server side validation or updating * a database. */ foreach( $_POST as $field ){ $results[] = strip_tags( $field ); } // Echo our results as a JSON encoded string. echo json_encode( $results ); ?>
I agree with JP, it sounds like you don't need an unique id here. 我同意JP,听起来你不需要这里的唯一ID。
Since the question is tagged "jquery" I suggest using the live event binding , eg 由于问题标记为“jquery”,我建议使用实时事件绑定 ,例如
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".deleterow").live("click", function() {
$(this).parents("tr:first").remove();
});
});
function foo(id) {
$("#"+id).append('<tr><td>'+(new Date()).getSeconds()+'</td><td>x</td><button class="deleterow">delete</button></td></tr>');
}
</script>
</head>
<body>
<table id="t1">
<tr><td>a</td><td>A</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>b</td><td>B</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>c</td><td>C</td><td><button class="deleterow">delete</button></td></tr>
</table>
<button onclick="foo('t1')">add</button>
</body>
</html>
The function passed to $(document).ready() is invoked when ...well, as the name states, when the document (dom) is ready. 传递给$(document).ready()的函数在......正如名称所述,文档(dom)准备就绪时调用。
$(".deleterow").live("click", ... : Whenever a click event occurs on an element with the css class "deleterow" the function passed as second parameter is invoked. In this case $(“。deleterow”)。live(“click”,...:每当在具有css类“deleterow”的元素上发生click事件时,将调用作为第二个参数传递的函数。在这种情况下
function() {
$(this).parents("tr:first").remove();
}
When the function is invoked the this-context is the element where the event occurred. 调用该函数时,this-context是发生事件的元素。 parents("tr:first") returns the first/"nearest" tr element in the ancestor-axis of the current element.
parents(“tr:first”)返回当前元素的祖先轴中的第一个/“最近”的tr元素。 remove() is probably self-explaining...
remove()可能是自我解释的......
edit: ok, now that the jquery tag is gone....
编辑:好的,现在jquery标签已经消失了......
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ shows a live-event binding for mootools. http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/显示了mootools的实时事件绑定。 Using that the "new" solution is quite similar to the jquery script
使用它,“新”解决方案与jquery脚本非常相似
window.addEvent('domready', function() {
// add an onclick handler for all current and future button elements
// within the table id=t1
$('t1').addLiveEvent('click', 'button', function(e){
// a button in t1 has been clicked, this=button element
// get the "nearest" tr in the parent/ancestor-axis
// and remove it
$(this).getParent("tr").dispose();
});
});
This should be unique enough for this project: 这个项目应该足够独特:
var newDate = new Date;
var id = newDate.getTime();
Then it would just be a matter of adding it the row in your loop and linking it to your delete button. 然后,只需在循环中添加行并将其链接到删除按钮即可。
I always use the php function uniqid()
. 我总是使用php函数
uniqid()
。 It generates a unique id based on the time in microseconds. 它根据以微秒为单位的时间生成唯一ID。 PHP Documentation .
PHP文档 。
You could loop through your results in PHP and add the result from uniqid()
to each result before using json_encode()
. 您可以在PHP中循环遍历结果,并在使用
json_encode()
之前将uniqid()
的结果添加到每个结果中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.