1
我正在尝试创建一个表格，当用户单击某个值时，允许用户编辑条目而无需使用HTML和JavaScript访问其他区域。我基本上得到了我需要的所有东西，除非我不知道为什么点击文本框/下拉菜单时焦点会一直消失。JavaScript失去重点编辑
有人可以帮我一下吗？
function valid_number() {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
function getID(oObject, type, objname) {
var id_fetched = oObject.id;
var visit_id;
var var_name;
var old_value;
var type;
var objname;
raw_values = id_fetched.split("|");
visit_id = raw_values[0];
var_name = raw_values[1];
old_value = raw_values[2];
var edit_id = document.getElementById("edit_id").value;
var reason_for_change = document.getElementById("reason").value;
//has the reason been filled out?
if (reason_for_change === "") {
alert('Cannot edit yet, must fill out reason for edit first!');
} else {
//reason given, proceed with edit
if (type === "text") {
document.getElementById(id_fetched).innerHTML = "<input type='text' name='" + objname + "' value='" + old_value + "' />";
};
if (type === "numeric") {
document.getElementById(id_fetched).innerHTML = "<input type='text' name='" + objname + "' value='" + old_value + "' onkeypress=\"return valid_number(event)\" />";
};
if (type === "yes_no") {
document.getElementById(id_fetched).innerHTML = "<select name='" + objname + "'><option value='0'>NO</option><option value='1'>YES</option></select>";
};
if (type === "yes_no_opt") {
document.getElementById(id_fetched).innerHTML = "<select name='" + objname + "'><option value='0'>NO</option><option value='1'>OPT</option><option value='2'>REQ</option></select>";
};
}
}
</script>
那么该表是：
<form method="GET">
<table id="visit_table" name="visit_table" border="1">
<tr><td colspan="14">Reason for change: <input type="text" id="reason" name="reason" length="225" maxlength="330" value="test" /> <input type="hidden" id="edit_id" name="edit_id" value="cf36903986716bc51f7e0b026c5a189e" /></td></tr><tr><th>Order</th><th>Name</th><th>BL</th><th>SCR</th><th>rSCR</th><th>RAND</th><th>PH.VIS.</th><th>UNSCHED</th><th>Sched.Only</th><th>REVENUE</th><th>COUNT</th><th>PROJ.VIS</th><th>STIPEND</th><th>ACTIVE</th></tr><tr><td contenteditable id="5054|visit_order|1.0000" onclick="getID(this, 'numeric', '5054-visitorder');">1.0000</td><td contenteditable id="5054|visit_name|Visit 1 Wk 0 " onclick="getID(this, 'text', '5054-visitname');">Visit 1 Wk 0 </td><td contenteditable id="5054|baseline_visit|1" onclick="getID(this, 'yes_no', '5054-blvisit');">YES</td><td contenteditable id="5054|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5054-scrvisit');"> </td><td contenteditable id="5054|rescr_visit|0" onclick="getID(this, 'yes_no', '5054-rescrvisit');"> </td><td contenteditable id="5054|randomization_visit|2" onclick="getID(this, 'yes_no_opt', '5054-randvisit');">REQ</td><td contenteditable id="5054|phone_visit| " onclick="getID(this, 'yes_no', '5054-phvisit');"> </td><td contenteditable id="5054|unsched_visit| " onclick="getID(this, 'yes_no', '5054-unschedvisit');"> </td><td contenteditable id="5054|sched_only_visit|" onclick="getID(this, 'yes_no', '5054-schedonly');"> </td><td contenteditable id="5054|count_rev|1" onclick="getID(this, 'yes_no', '5054-countrev');">YES</td><td contenteditable id="5054|count_vis|1" onclick="getID(this, 'yes_no', '5054-countvis');">YES</td><td contenteditable id="5054|proj_vis|" onclick="getID(this, 'yes_no', '5054-projvisit');">NO</td><td contenteditable id="5054|patient_stipend|0.00" onclick="getID(this, 'text', '5054-stipend');">0.00</td><td contenteditable id="5054|active_vis|" onclick="getID(this, 'yes_no', '5054-active');">NO</td></tr><tr><td contenteditable id="5055|visit_order|2.0000" onclick="getID(this, 'numeric', '5055-visitorder');">2.0000</td><td contenteditable id="5055|visit_name|Visit 2 Wk 2 " onclick="getID(this, 'text', '5055-visitname');">Visit 2 Wk 2 </td><td contenteditable id="5055|baseline_visit|0" onclick="getID(this, 'yes_no', '5055-blvisit');"> </td><td contenteditable id="5055|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5055-scrvisit');"> </td><td contenteditable id="5055|rescr_visit|0" onclick="getID(this, 'yes_no', '5055-rescrvisit');"> </td><td contenteditable id="5055|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5055-randvisit');"> </td><td contenteditable id="5055|phone_visit|0" onclick="getID(this, 'yes_no', '5055-phvisit');"> </td><td contenteditable id="5055|unsched_visit|0" onclick="getID(this, 'yes_no', '5055-unschedvisit');"> </td><td contenteditable id="5055|sched_only_visit|" onclick="getID(this, 'yes_no', '5055-schedonly');"> </td><td contenteditable id="5055|count_rev|1" onclick="getID(this, 'yes_no', '5055-countrev');">YES</td><td contenteditable id="5055|count_vis|1" onclick="getID(this, 'yes_no', '5055-countvis');">YES</td><td contenteditable id="5055|proj_vis|" onclick="getID(this, 'yes_no', '5055-projvisit');">NO</td><td contenteditable id="5055|patient_stipend|0.00" onclick="getID(this, 'text', '5055-stipend');">0.00</td><td contenteditable id="5055|active_vis|" onclick="getID(this, 'yes_no', '5055-active');">NO</td></tr><tr><td contenteditable id="5056|visit_order|3.0000" onclick="getID(this, 'numeric', '5056-visitorder');">3.0000</td><td contenteditable id="5056|visit_name|Visit 3 Wk 4 " onclick="getID(this, 'text', '5056-visitname');">Visit 3 Wk 4 </td><td contenteditable id="5056|baseline_visit|0" onclick="getID(this, 'yes_no', '5056-blvisit');"> </td><td contenteditable id="5056|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5056-scrvisit');"> </td><td contenteditable id="5056|rescr_visit|0" onclick="getID(this, 'yes_no', '5056-rescrvisit');"> </td><td contenteditable id="5056|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5056-randvisit');"> </td><td contenteditable id="5056|phone_visit|0" onclick="getID(this, 'yes_no', '5056-phvisit');"> </td><td contenteditable id="5056|unsched_visit|0" onclick="getID(this, 'yes_no', '5056-unschedvisit');"> </td><td contenteditable id="5056|sched_only_visit|" onclick="getID(this, 'yes_no', '5056-schedonly');"> </td><td contenteditable id="5056|count_rev|1" onclick="getID(this, 'yes_no', '5056-countrev');">YES</td><td contenteditable id="5056|count_vis|1" onclick="getID(this, 'yes_no', '5056-countvis');">YES</td><td contenteditable id="5056|proj_vis|" onclick="getID(this, 'yes_no', '5056-projvisit');">NO</td><td contenteditable id="5056|patient_stipend|0.00" onclick="getID(this, 'text', '5056-stipend');">0.00</td><td contenteditable id="5056|active_vis|" onclick="getID(this, 'yes_no', '5056-active');">NO</td></tr><tr><td contenteditable id="5057|visit_order|4.0000" onclick="getID(this, 'numeric', '5057-visitorder');">4.0000</td><td contenteditable id="5057|visit_name|Visit 4 Wk 6 " onclick="getID(this, 'text', '5057-visitname');">Visit 4 Wk 6 </td><td contenteditable id="5057|baseline_visit|0" onclick="getID(this, 'yes_no', '5057-blvisit');"> </td><td contenteditable id="5057|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5057-scrvisit');"> </td><td contenteditable id="5057|rescr_visit|0" onclick="getID(this, 'yes_no', '5057-rescrvisit');"> </td><td contenteditable id="5057|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5057-randvisit');"> </td><td contenteditable id="5057|phone_visit|0" onclick="getID(this, 'yes_no', '5057-phvisit');"> </td><td contenteditable id="5057|unsched_visit|0" onclick="getID(this, 'yes_no', '5057-unschedvisit');"> </td><td contenteditable id="5057|sched_only_visit|" onclick="getID(this, 'yes_no', '5057-schedonly');"> </td><td contenteditable id="5057|count_rev|1" onclick="getID(this, 'yes_no', '5057-countrev');">YES</td><td contenteditable id="5057|count_vis|1" onclick="getID(this, 'yes_no', '5057-countvis');">YES</td><td contenteditable id="5057|proj_vis|" onclick="getID(this, 'yes_no', '5057-projvisit');">NO</td><td contenteditable id="5057|patient_stipend|0.00" onclick="getID(this, 'text', '5057-stipend');">0.00</td><td contenteditable id="5057|active_vis|" onclick="getID(this, 'yes_no', '5057-active');">NO</td></tr><tr><td contenteditable id="5058|visit_order|5.0000" onclick="getID(this, 'numeric', '5058-visitorder');">5.0000</td><td contenteditable id="5058|visit_name|Visit 5 Wk 12 " onclick="getID(this, 'text', '5058-visitname');">Visit 5 Wk 12 </td><td contenteditable id="5058|baseline_visit|0" onclick="getID(this, 'yes_no', '5058-blvisit');"> </td><td contenteditable id="5058|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5058-scrvisit');"> </td><td contenteditable id="5058|rescr_visit|0" onclick="getID(this, 'yes_no', '5058-rescrvisit');"> </td><td contenteditable id="5058|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5058-randvisit');"> </td><td contenteditable id="5058|phone_visit|0" onclick="getID(this, 'yes_no', '5058-phvisit');"> </td><td contenteditable id="5058|unsched_visit|0" onclick="getID(this, 'yes_no', '5058-unschedvisit');"> </td><td contenteditable id="5058|sched_only_visit|" onclick="getID(this, 'yes_no', '5058-schedonly');"> </td><td contenteditable id="5058|count_rev|1" onclick="getID(this, 'yes_no', '5058-countrev');">YES</td><td contenteditable id="5058|count_vis|1" onclick="getID(this, 'yes_no', '5058-countvis');">YES</td><td contenteditable id="5058|proj_vis|" onclick="getID(this, 'yes_no', '5058-projvisit');">NO</td><td contenteditable id="5058|patient_stipend|0.00" onclick="getID(this, 'text', '5058-stipend');">0.00</td><td contenteditable id="5058|active_vis|" onclick="getID(this, 'yes_no', '5058-active');">NO</td></tr><tr><td contenteditable id="5059|visit_order|6.0000" onclick="getID(this, 'numeric', '5059-visitorder');">6.0000</td><td contenteditable id="5059|visit_name|Visit 5A Wk 18 " onclick="getID(this, 'text', '5059-visitname');">Visit 5A Wk 18 </td><td contenteditable id="5059|baseline_visit|0" onclick="getID(this, 'yes_no', '5059-blvisit');"> </td><td contenteditable id="5059|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5059-scrvisit');"> </td><td contenteditable id="5059|rescr_visit|0" onclick="getID(this, 'yes_no', '5059-rescrvisit');"> </td><td contenteditable id="5059|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5059-randvisit');"> </td><td contenteditable id="5059|phone_visit|0" onclick="getID(this, 'yes_no', '5059-phvisit');"> </td><td contenteditable id="5059|unsched_visit|0" onclick="getID(this, 'yes_no', '5059-unschedvisit');"> </td><td contenteditable id="5059|sched_only_visit|" onclick="getID(this, 'yes_no', '5059-schedonly');"> </td><td contenteditable id="5059|count_rev|1" onclick="getID(this, 'yes_no', '5059-countrev');">YES</td><td contenteditable id="5059|count_vis|1" onclick="getID(this, 'yes_no', '5059-countvis');">YES</td><td contenteditable id="5059|proj_vis|" onclick="getID(this, 'yes_no', '5059-projvisit');">NO</td><td contenteditable id="5059|patient_stipend|0.00" onclick="getID(this, 'text', '5059-stipend');">0.00</td><td contenteditable id="5059|active_vis|" onclick="getID(this, 'yes_no', '5059-active');">NO</td></tr><tr><td contenteditable id="5060|visit_order|7.0000" onclick="getID(this, 'numeric', '5060-visitorder');">7.0000</td><td contenteditable id="5060|visit_name|Visit 6 Wk 24 " onclick="getID(this, 'text', '5060-visitname');">Visit 6 Wk 24 </td><td contenteditable id="5060|baseline_visit|0" onclick="getID(this, 'yes_no', '5060-blvisit');"> </td><td contenteditable id="5060|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5060-scrvisit');"> </td><td contenteditable id="5060|rescr_visit|0" onclick="getID(this, 'yes_no', '5060-rescrvisit');"> </td><td contenteditable id="5060|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5060-randvisit');"> </td><td contenteditable id="5060|phone_visit|0" onclick="getID(this, 'yes_no', '5060-phvisit');"> </td><td contenteditable id="5060|unsched_visit|0" onclick="getID(this, 'yes_no', '5060-unschedvisit');"> </td><td contenteditable id="5060|sched_only_visit|" onclick="getID(this, 'yes_no', '5060-schedonly');"> </td><td contenteditable id="5060|count_rev|1" onclick="getID(this, 'yes_no', '5060-countrev');">YES</td><td contenteditable id="5060|count_vis|1" onclick="getID(this, 'yes_no', '5060-countvis');">YES</td><td contenteditable id="5060|proj_vis|" onclick="getID(this, 'yes_no', '5060-projvisit');">NO</td><td contenteditable id="5060|patient_stipend|0.00" onclick="getID(this, 'text', '5060-stipend');">0.00</td><td contenteditable id="5060|active_vis|" onclick="getID(this, 'yes_no', '5060-active');">NO</td></tr><tr><td contenteditable id="5061|visit_order|8.0000" onclick="getID(this, 'numeric', '5061-visitorder');">8.0000</td><td contenteditable id="5061|visit_name|Visit 6A Wk 30 " onclick="getID(this, 'text', '5061-visitname');">Visit 6A Wk 30 </td><td contenteditable id="5061|baseline_visit|0" onclick="getID(this, 'yes_no', '5061-blvisit');"> </td><td contenteditable id="5061|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5061-scrvisit');"> </td><td contenteditable id="5061|rescr_visit|0" onclick="getID(this, 'yes_no', '5061-rescrvisit');"> </td><td contenteditable id="5061|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5061-randvisit');"> </td><td contenteditable id="5061|phone_visit|0" onclick="getID(this, 'yes_no', '5061-phvisit');"> </td><td contenteditable id="5061|unsched_visit|0" onclick="getID(this, 'yes_no', '5061-unschedvisit');"> </td><td contenteditable id="5061|sched_only_visit|" onclick="getID(this, 'yes_no', '5061-schedonly');"> </td><td contenteditable id="5061|count_rev|1" onclick="getID(this, 'yes_no', '5061-countrev');">YES</td><td contenteditable id="5061|count_vis|1" onclick="getID(this, 'yes_no', '5061-countvis');">YES</td><td contenteditable id="5061|proj_vis|" onclick="getID(this, 'yes_no', '5061-projvisit');">NO</td><td contenteditable id="5061|patient_stipend|0.00" onclick="getID(this, 'text', '5061-stipend');">0.00</td><td contenteditable id="5061|active_vis|" onclick="getID(this, 'yes_no', '5061-active');">NO</td></tr><tr><td contenteditable id="5062|visit_order|9.0000" onclick="getID(this, 'numeric', '5062-visitorder');">9.0000</td><td contenteditable id="5062|visit_name|Visit 7 Wk 36 " onclick="getID(this, 'text', '5062-visitname');">Visit 7 Wk 36 </td><td contenteditable id="5062|baseline_visit|0" onclick="getID(this, 'yes_no', '5062-blvisit');"> </td><td contenteditable id="5062|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5062-scrvisit');"> </td><td contenteditable id="5062|rescr_visit|0" onclick="getID(this, 'yes_no', '5062-rescrvisit');"> </td><td contenteditable id="5062|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5062-randvisit');"> </td><td contenteditable id="5062|phone_visit|0" onclick="getID(this, 'yes_no', '5062-phvisit');"> </td><td contenteditable id="5062|unsched_visit|0" onclick="getID(this, 'yes_no', '5062-unschedvisit');"> </td><td contenteditable id="5062|sched_only_visit|" onclick="getID(this, 'yes_no', '5062-schedonly');"> </td><td contenteditable id="5062|count_rev|1" onclick="getID(this, 'yes_no', '5062-countrev');">YES</td><td contenteditable id="5062|count_vis|1" onclick="getID(this, 'yes_no', '5062-countvis');">YES</td><td contenteditable id="5062|proj_vis|" onclick="getID(this, 'yes_no', '5062-projvisit');">NO</td><td contenteditable id="5062|patient_stipend|0.00" onclick="getID(this, 'text', '5062-stipend');">0.00</td><td contenteditable id="5062|active_vis|" onclick="getID(this, 'yes_no', '5062-active');">NO</td></tr><tr><td contenteditable id="5063|visit_order|10.0000" onclick="getID(this, 'numeric', '5063-visitorder');">10.0000</td><td contenteditable id="5063|visit_name|Visit 7A Wk 42 " onclick="getID(this, 'text', '5063-visitname');">Visit 7A Wk 42 </td><td contenteditable id="5063|baseline_visit|0" onclick="getID(this, 'yes_no', '5063-blvisit');"> </td><td contenteditable id="5063|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5063-scrvisit');"> </td><td contenteditable id="5063|rescr_visit|0" onclick="getID(this, 'yes_no', '5063-rescrvisit');"> </td><td contenteditable id="5063|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5063-randvisit');"> </td><td contenteditable id="5063|phone_visit|0" onclick="getID(this, 'yes_no', '5063-phvisit');"> </td><td contenteditable id="5063|unsched_visit|0" onclick="getID(this, 'yes_no', '5063-unschedvisit');"> </td><td contenteditable id="5063|sched_only_visit|" onclick="getID(this, 'yes_no', '5063-schedonly');"> </td><td contenteditable id="5063|count_rev|1" onclick="getID(this, 'yes_no', '5063-countrev');">YES</td><td contenteditable id="5063|count_vis|1" onclick="getID(this, 'yes_no', '5063-countvis');">YES</td><td contenteditable id="5063|proj_vis|" onclick="getID(this, 'yes_no', '5063-projvisit');">NO</td><td contenteditable id="5063|patient_stipend|0.00" onclick="getID(this, 'text', '5063-stipend');">0.00</td><td contenteditable id="5063|active_vis|" onclick="getID(this, 'yes_no', '5063-active');">NO</td></tr><tr><td contenteditable id="5064|visit_order|11.0000" onclick="getID(this, 'numeric', '5064-visitorder');">11.0000</td><td contenteditable id="5064|visit_name|Visit 8/Wk 48 Final/ET " onclick="getID(this, 'text', '5064-visitname');">Visit 8/Wk 48 Final/ET </td><td contenteditable id="5064|baseline_visit| " onclick="getID(this, 'yes_no', '5064-blvisit');"> </td><td contenteditable id="5064|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5064-scrvisit');"> </td><td contenteditable id="5064|rescr_visit|0" onclick="getID(this, 'yes_no', '5064-rescrvisit');"> </td><td contenteditable id="5064|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5064-randvisit');"> </td><td contenteditable id="5064|phone_visit| " onclick="getID(this, 'yes_no', '5064-phvisit');"> </td><td contenteditable id="5064|unsched_visit| " onclick="getID(this, 'yes_no', '5064-unschedvisit');"> </td><td contenteditable id="5064|sched_only_visit|" onclick="getID(this, 'yes_no', '5064-schedonly');"> </td><td contenteditable id="5064|count_rev|1" onclick="getID(this, 'yes_no', '5064-countrev');">YES</td><td contenteditable id="5064|count_vis|1" onclick="getID(this, 'yes_no', '5064-countvis');">YES</td><td contenteditable id="5064|proj_vis|" onclick="getID(this, 'yes_no', '5064-projvisit');">NO</td><td contenteditable id="5064|patient_stipend|0.00" onclick="getID(this, 'text', '5064-stipend');">0.00</td><td contenteditable id="5064|active_vis|" onclick="getID(this, 'yes_no', '5064-active');">NO</td></tr><tr><td contenteditable id="5065|visit_order|12.0000" onclick="getID(this, 'numeric', '5065-visitorder');">12.0000</td><td contenteditable id="5065|visit_name|Unscheduled " onclick="getID(this, 'text', '5065-visitname');">Unscheduled </td><td contenteditable id="5065|baseline_visit| " onclick="getID(this, 'yes_no', '5065-blvisit');"> </td><td contenteditable id="5065|screening_visit|0" onclick="getID(this, 'yes_no_opt', '5065-scrvisit');"> </td><td contenteditable id="5065|rescr_visit|0" onclick="getID(this, 'yes_no', '5065-rescrvisit');"> </td><td contenteditable id="5065|randomization_visit|0" onclick="getID(this, 'yes_no_opt', '5065-randvisit');"> </td><td contenteditable id="5065|phone_visit| " onclick="getID(this, 'yes_no', '5065-phvisit');"> </td><td contenteditable id="5065|unsched_visit|1" onclick="getID(this, 'yes_no', '5065-unschedvisit');">YES</td><td contenteditable id="5065|sched_only_visit|" onclick="getID(this, 'yes_no', '5065-schedonly');"> </td><td contenteditable id="5065|count_rev|1" onclick="getID(this, 'yes_no', '5065-countrev');">YES</td><td contenteditable id="5065|count_vis| " onclick="getID(this, 'yes_no', '5065-countvis');">NO</td><td contenteditable id="5065|proj_vis|" onclick="getID(this, 'yes_no', '5065-projvisit');">NO</td><td contenteditable id="5065|patient_stipend|0.00" onclick="getID(this, 'text', '5065-stipend');">0.00</td><td contenteditable id="5065|active_vis|" onclick="getID(this, 'yes_no', '5065-active');">NO</td></tr><tr><td colspan="14" align="right"><input type="submit" value="Make Changes"></tr>
</table>
</form>
注意，那'td'不支持'contenteditable'中的IE。 – Teemu 2014-10-09 15:15:00