通过jquery / javascript / ajax编辑HTML / PHP表中的整个列?

时间:2014-05-26 17:15:10

标签: javascript php jquery html ajax

我需要帮助!

我有一个php页面,它从数组()生成一个html表。这个数组包含了csv的所有行(没问题):

load_csv.php

<?php
function print_array_of_arrays_to_html_table(&$array_by_reference)
{
    echo "<br><table border=1 align=center id=tableID>";
    for ($i = 0; $i < count($array_by_reference); $i++)
    {           
        echo "<tr>";
        for ($j = 0; $j < count($array_by_reference[$i]); $j++)
        {
            echo "<td align=right title='f:".$i."\nc:".$j."\nv:".($array_by_reference[$i][$j])."'>".($array_by_reference[$i][$j])."</td>";
        }
        echo "</tr>";
    }
    echo "</table>";        
}
?>

我的目的是在文本字段中指明列号,更改该列中所有单元格的所有值。该列中的所有单元格的值都相同。例如,将all全部更改为“0”。

现在,使用'jquery'我可以单独更改任何单元格:

相同的load_csv.php:

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript">
$('#tableID').click(function(event){
    var original = $(event.target).text().toString();
    var original_copy = original;
    var retValue = prompt("\nChange value? ", original);
    //if not empty and OK is pressed
    if (retValue !== '' && retValue !== null)
    {
         //if not the same that 'original'
         if (retValue !== original)
         {
            $(event.target).text(retValue);                     
         }
         else
         {
            alert("has not been modified" + original);
         }
    }
    else
    {
         //if click Cancel
         alert("has not been modified: " + original_copy);
    }               
})
</script>

但也希望一次更改整列。例如,调用按钮的函数onclick():

相同的load_csv.php:

<form>
    <input type='button' value="Go back" onClick="history.go(-1);return true;"/>
    <!-- if onclick button all values ​​of all cells in the column are changed -->
    <br>Column: 
    <input type='text'/>
    <input type='button' value="Change all column?" onClick="myfunction()"/>
</form>

输出示例: enter link description here

任何提示(是的,所有代码都在同一个php.page。抱歉我的英文不好)?

提前致谢。

编辑:解决方案: 我创建了两个选择框,一个只显示我想要更改的列,另一个允许我选择添加两个值(0或1)。然后用按钮我调用该功能。这包括选择框选择的值。接下来,我检查单个单元格(td)有0或1和“Pum”!成功。

<select name="cols_bool" id="cols_bool">
    <option value="not_selected" selected="selected">Choose...</option>
<?php 
    if (count($col_with_bools) > 0)
    {
        for ($i = 0; $i < count($col_with_bools); $i++)
        {
            echo "<option value=".$i.">".$col_with_bools[$i]."</option>";
        }           
    }       
?>
</select>
<br>New bool values to insert:
<select name="value_to_replace" id="value_to_replace">
    <option value="1" selected="selected">1 (TRUE)</option>
    <option value="2">0 (FALSE)</option>
</select>
<input type='button' class="change" value="Change all cells?" onClick="replace()"/>

<script language="javascript" type="text/javascript">
function replace()
{
    var column_select = $('#cols_bool option:selected').text();
    var value_to_insert = $('#value_to_replace option:selected').text();
    $("#tableID").find('tr').each(function(){
       var $td = $(this).find('td');
       var $td_text = $td.eq(column_select).text();
       if ($td_text == '1' || $td_text == '0')
       {
           $td.eq(column_select).text(value_to_insert.substring(0,1));
       }                                
    });
}
</script>

1 个答案:

答案 0 :(得分:0)

你可以这样做

function replace(value_to_replace)
{
$("#tableID").find('tr').each(function () {
        var $td = $(this).find('td');
            $td.eq(3).text(value_to_replace);        
    });
}
相关问题